Webpack内部プラグイン
これは、Webpackによって内部的に使用されるプラグインのリストです。
内部プラグインのカテゴリ
環境
コンパイラの環境に影響を与えるプラグイン。
NodeEnvironmentPlugin
webpack.node.NodeEnvironmentPlugin()
コンパイラにNode.jsスタイルのファイルシステムを適用します。
コンパイラ
コンパイラに影響を与えるプラグイン
MemoryCachePlugin
MemoryCachePlugin()
コンパイラにキャッシュを追加し、モジュールをメモリにキャッシュします。
ProgressPlugin
ProgressPlugin(handler)
コンパイラにフックして進捗情報を抽出します。handler は function(percentage, message) というシグネチャを持つ必要があります。Percentage は 0～1 の値で呼び出され、0 は開始、1 は終了を示します。
RecordIdsPlugin
RecordIdsPlugin()
モジュールとチャンクIDをレコードから保存および復元します。
エントリ
コンパイルにエントリチャンクを追加するプラグイン。
EntryPlugin
EntryPlugin(context, entry, options)
コンパイル時にエントリチャンクを追加します。チャンクの名前は options.name で、1つのモジュール（と依存関係）のみが含まれます。モジュールは context（絶対パス）の entry から解決されます。
PrefetchPlugin
PrefetchPlugin(context, request)
より並列的なコンパイルを可能にするために、request と依存関係をプリフェッチします。チャンクは作成しません。モジュールは context（絶対パス）の request から解決されます。
出力
JsonpTemplatePlugin
JsonpTemplatePlugin(options)
チャンクはJSONP呼び出しにラップされます。ローディングアルゴリズムはエントリチャンクに含まれています。<script>タグを追加することでチャンクをロードします。
options は出力オプションです。
options.jsonpFunction はJSONP関数です。
options.publicPath はチャンクのロードパスとして使用されます。
options.chunkFilename はチャンクが期待されるファイル名です。
NodeTemplatePlugin
node/NodeTemplatePlugin(options)
チャンクは、バンドルされたモジュールをエクスポートするNode.jsモジュールにラップされます。エントリチャンクは、それらをrequireすることでチャンクをロードします。
options は出力オプションです。
options.chunkFilename はチャンクが期待されるファイル名です。
LibraryTemplatePlugin
LibraryTemplatePlugin(name, target)
エントリチャンクは、typeタイプのライブラリnameを形成するように装飾されます。
WebWorkerTemplatePlugin
webworker/WebWorkerTemplatePlugin(options)
チャンクはimportScriptsでロードされます。それ以外はJsonpTemplatePluginと同様です。
options は出力オプションです。
EvalDevToolModulePlugin
各モジュールを// @sourceURLで注釈されたevalでラップすることで、モジュールテンプレートを装飾します。
SourceMapDevToolPlugin
SourceMapDevToolPlugin(sourceMapFilename, sourceMappingURLComment, moduleFilenameTemplate, fallbackModuleFilenameTemplate)
各チャンクのソースマップを生成することでテンプレートを装飾します。
sourceMapFilename ソースマップのファイル名テンプレート。[hash]、[name]、[id]、[file]、[filebase]が置換されます。この引数が欠けている場合、ソースマップはDataUrlとしてインライン化されます。
HotModuleReplacementPlugin
HotModuleReplacementPlugin(options)
ホットモジュール置換のサポートを追加します。テンプレートを装飾してランタイムコードを追加します。module.hot APIを追加します。
options.hotUpdateChunkFilename ホットアップデートチャンクのファイル名。
options.hotUpdateMainFilename ホットアップデートマニフェストのファイル名。
options.hotUpdateFunction ホットアップデートのJSON関数名。
ソース
モジュールのソースコードに影響を与えるプラグイン。
APIPlugin
webpack_public_path、webpack_require、webpack_modules、webpack_chunk_load をアクセス可能にします。require.valueOf と require.onError が他のプラグインによって処理されないことを保証します。
CompatibilityPlugin
現在役に立ちません。他のモジュールローダーとの互換性を確保します。
ConstPlugin
if (...)文と三項演算子内の式を評価して、パーサーによって発行されるフックを使用して、true/falseで置き換え、さらなるデッドブランチの削除を可能にします。
デッドブランチに関する複数の最適化が本番モードで行われます。
- Terserによって実行されるもの
- Webpackによって実行されるもの
Webpackは条件文の評価を試みます。成功すると、デッドブランチが削除されます。Webpackは、コンパイラが認識しない限り、定数畳み込みを行うことができません。例えば
import { calculateTax } from './tax';
const FOO = 1;
if (FOO === 0) {
// dead branch
calculateTax();
}上記の例では、Webpackはブランチの刈り込みを行うことができませんが、Terserは行います。ただし、FOOがDefinePluginを使用して定義されている場合、Webpackは成功します。
import { calculateTax } from './tax';も刈り取られることに注意してください。なぜならcalculateTax()の呼び出しはデッドブランチにあり、削除されたからです。
ProvidePlugin
ProvidePlugin(name, request)
モジュールでnameが使用されている場合、require(<request>)でロードされたモジュールで満たされます。
NodeStuffPlugin
NodeStuffPlugin(options, context)
通常Node.jsモジュールで使用可能なものを提供します。
また、使用している場合、moduleにいくつかのNode.jsのものを追加します。
RequireJsStuffPlugin
require.jsで通常使用可能なものを提供します。
require[js].configは削除されます。require.versionは0.0.0です。requirejs.onErrorはrequire.onErrorにマップされます。
NodeSourcePlugin
node/NodeSourcePlugin(options)
このモジュールは、非Node.js環境では使用できないNode.jsのものを追加します。
使用されている場合、process、console、Buffer、globalのポリフィルを追加します。また、組み込みのNode.js置換モジュールもバインドします。
NodeTargetPlugin
node/NodeTargetPlugin()
バンドルをNode.js環境で実行する場合、このプラグインを使用する必要があります。
バンドルされている場合でも、ネイティブモジュールが正しくロードされることを保証します。
AMDPlugin
dependencies/AMDPlugin(options)
モジュールにAMDスタイルのdefineとrequireを提供します。また、require.amd、define.amd、webpack_amd_options##をパラメーターとして渡されたoptionsにバインドします。
CommonJsPlugin
dependencies/CommonJsPlugin
モジュールにCommonJsスタイルのrequireを提供します。
RequireContextPlugin
dependencies/RequireContextPlugin(modulesDirectories, extensions)
require.contextを提供します。パラメーターmodulesDirectoriesとextensionsは、ファイルの代替リクエストを見つけるために使用されます。リゾルバーに提供する配列と同じ配列を提供するのに役立ちます。
RequireEnsurePlugin
dependencies/RequireEnsurePlugin()
require.ensureを提供します。
RequireIncludePlugin
dependencies/RequireIncludePlugin()
require.includeを提供します。
DefinePlugin
DefinePlugin(definitions)
識別子に対して定数を定義します。
definitions はオブジェクトです。
最適化
webpack.optimize名前空間下のすべてのプラグインは、modeが'none'に設定されている場合にのみ使用する必要があります。それ以外の場合は、プラグインが2回適用されるため、問題が発生する可能性があります。
LimitChunkCountPlugin
optimize/LimitChunkCountPlugin(options)
チャンク数をoptions.maxChunksより少なくマージします。
各チャンクのオーバーヘッドはoptions.chunkOverheadで指定するか、デフォルトの10000を使用します。エントリチャンクのサイズはoptions.entryChunkMultiplicator（または10）倍されます。
合計サイズを最も削減するチャンクが最初にマージされます。複数の組み合わせが等しい場合は、マージされた最小サイズが優先されます。
MergeDuplicateChunksPlugin
optimize/MergeDuplicateChunksPlugin()
同じモジュールを含むチャンクがマージされます。
RemoveEmptyChunksPlugin
optimize/RemoveEmptyChunksPlugin()
すべての親チャンクに含まれるモジュールが、チャンクから削除されます。
MinChunkSizePlugin
optimize/MinChunkSizePlugin(minChunkSize)
各チャンクがminChunkSizeの最小サイズになるまで、チャンクがマージされます。
ModuleConcatenationPlugin
ModuleConcatenationPluginページ を参照してください。
FlagIncludedChunksPlugin
optimize/FlagIncludedChunksPlugin()
チャンクに含まれるチャンクのチャンクIDを追加します。これにより、不要なチャンクの読み込みがなくなります。
RealContentHashPlugin
optimize/RealContentHashPlugin()
optimization.realContentHash オプションが有効になっている場合、webpackは内部的にRealContentHashPluginをコンパイラに適用します。
Hook
RealContentHashPluginは、ハッシュの更新をカスタマイズするためのupdateHash 5.8.0+フックを提供します。
const webpack = require('webpack');
const RealContentHashPlugin = webpack.optimize.RealContentHashPlugin;
// ...
compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
const hooks = RealContentHashPlugin.getCompilationHooks(compilation);
hooks.updateHash.tap('MyPlugin', (content, oldHash) => {
// you can calculate the hash here as you wish
});
});5 貢献者
