ProvidePlugin

Automatically load modules instead of having to ?import? or ?require? them everywhere.

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

or

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

默認(rèn)情況下，模塊解析路徑為當(dāng)前文件夾（?./**?）和 ?node_modules? 。

還可以指定完整路徑：

const path = require('path');

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

每當(dāng)在模塊中遇到標(biāo)識(shí)符作為自由變量時(shí)，模塊都會(huì)自動(dòng)加載，并將標(biāo)識(shí)符填充為加載的模塊的導(dǎo)出（或?qū)傩?，以支持命名?dǎo)出）。

要導(dǎo)入ES2015模塊的默認(rèn)導(dǎo)出，必須指定模塊的默認(rèn)屬性。

Usage: jQuery

為了自動(dòng)加載 ?jquery? ，我們可以將其公開的兩個(gè)變量指向相應(yīng)的? node? 模塊：

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

然后在我們的任何源代碼中：

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

Usage: jQuery with Angular 1

Angular尋找 ?window.jQuery? 以確定jQuery是否存在，請(qǐng)參見源代碼。

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

Usage: Lodash Map

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

Usage: Vue.js

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