ProvidePlugin

至る所で`import`または`require`する必要がないモジュールの自動読み込み。

new webpack.ProvidePlugin({
  identifier: 'module1',
  // ...
});

または

new webpack.ProvidePlugin({
  identifier: ['module1', 'property1'],
  // ...
});

デフォルトでは、モジュール解決パスは現在のフォルダ（`./**`）と`node_modules`です。

完全パスを指定することも可能です。

const path = require('path');

new webpack.ProvidePlugin({
  identifier: path.resolve(path.join(__dirname, 'src/module1')),
  // ...
});

`identifier`がモジュール内で自由変数として検出されるたびに、`module`が自動的にロードされ、`identifier`はロードされた`module`のエクスポート（または名前付きエクスポートをサポートするための`property`）で埋められます。

ES2015モジュールのデフォルトエクスポートをインポートするには、モジュールのデフォルトプロパティを指定する必要があります。

使用方法：jQuery

jqueryを自動的に読み込むには、それが公開する両方の変数を対応するノードモジュールに設定します。

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
});

その後、ソースコードのいずれかで

// in a module
$('#item'); // <= works
jQuery('#item'); // <= also works
// $ is automatically set to the exports of module "jquery"

使用方法：Angular 1 と jQuery

Angular は、jQuery が存在するかどうかを判断するためにwindow.jQueryを探します。ソースコードを参照してください。

new webpack.ProvidePlugin({
  'window.jQuery': 'jquery',
});

使用方法：Lodash Map

new webpack.ProvidePlugin({
  _map: ['lodash', 'map'],
});

使用方法：Vue.js

new webpack.ProvidePlugin({
  Vue: ['vue/dist/vue.esm.js', 'default'],
});