DllPlugin

DllPluginとDllReferencePluginは、ビルド時間の性能を大幅に向上させることができる方法でバンドルを分割する手段を提供します。「DLL」という用語は、Microsoftによって最初に導入されたダイナミックリンクライブラリを表しています。

DllPlugin

このプラグインは、別々のwebpack設定で使用され、dll専用のバンドルを作成します。これはmanifest.jsonファイルを作成し、これはDllReferencePluginによって依存関係をマッピングするために使用されます。

• context（オプション）：マニフェストファイル内のリクエストのコンテキスト（webpackコンテキストがデフォルト）
• format（boolean = false）：trueの場合、マニフェストjsonファイル（出力）はフォーマットされます。
• name：公開されたdll関数の名前（TemplatePaths：[fullhash]、[chunkhash]、[contenthash]、および[name]）
• path：マニフェストjsonファイル（出力）への**絶対パス**
• entryOnly（boolean = true）：trueの場合、エントリポイントのみが公開されます。
• type：dllバンドルのタイプ

new webpack.DllPlugin(options);

指定されたpathに書き込まれるmanifest.jsonを作成します。これは、requireおよびimportリクエストからモジュールIDへのマッピングが含まれています。DllReferencePluginで使用されます。

このプラグインをoutput.libraryオプションと組み合わせて、DLL関数を公開（グローバルスコープに配置）します。

DllReferencePlugin

このプラグインは、プライマリWebpack設定で使用され、事前にビルドされた依存関係をrequireするために、dll専用のバンドルを参照します。

• context：（**絶対パス**）マニフェスト（またはcontentプロパティ）内のリクエストのコンテキスト
• extensions：DLLバンドルでモジュールを解決するために使用される拡張子（'scope'を使用する場合のみ使用されます）。
• manifest：contentとnameを含むオブジェクト、またはコンパイル時に読み込まれるJSONマニフェストの絶対パスへの文字列
• content（オプション）：リクエストからモジュールIDへのマッピング（デフォルトはmanifest.content）
• name（オプション）：DLLが公開される識別子（デフォルトはmanifest.name）（externalsも参照）
• scope（オプション）：DLLの内容にアクセスするために使用されるプレフィックス
• sourceType（オプション）：DLLの公開方法（libraryTarget）

new webpack.DllReferencePlugin(options);

DLLマニフェストファイルを参照して、依存関係の名前をモジュールIDにマッピングし、必要に応じて内部の__webpack_require__関数を使用してそれらを要求します。

モード

このプラグインは、スコープ付きモードとマッピングモードの2つの異なるモードで使用できます。

スコープ付きモード

DLLの内容は、モジュールプレフィックスの下でアクセスできます。つまり、scope = 'xyz'の場合、DLL内のファイルabcはrequire('xyz/abc')を介してアクセスできます。

マッピングモード

DLLの内容は現在のディレクトリにマッピングされます。要求されたファイルが（解決後）DLL内のファイルと一致する場合、DLLからのファイルが代わりに使用されます。

これはDLLバンドルのすべてのファイルを解決した後に発生するため、DLLバンドルのコンシューマーに対して同じパスを使用可能にする必要があります。つまり、DLLにlodashとファイルabcが含まれている場合、require('lodash')とrequire('./abc')はメインバンドルにビルドする代わりに、DLLから使用されます。

使用方法

webpack.vendor.config.js

const path = require('path');

new webpack.DllPlugin({
  context: __dirname,
  name: '[name]_[fullhash]',
  path: path.join(__dirname, 'manifest.json'),
});

webpack.app.config.js

new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require('./manifest.json'),
  scope: 'xyz',
  sourceType: 'commonjs2',
});

例

ベンダーとユーザー

2つの別々の例フォルダ。スコープとコンテキストを示しています。

参照

ソース

• DllPluginソース
• DllReferencePluginソース
• DllEntryPluginソース
• DllModuleFactoryソース
• ManifestPluginソース

テスト

• DllPlugin作成テスト
• スコープなしのDllPluginテスト
• DllReferencePluginによるDLL使用テスト