1. ProvidePlugin

自动加载模块，而不必到处import或require。

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

或者

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

任何时候，当identifier被当作未赋值的变量时，module就会自动被加载，并且identifier会被这个module输出的内容所赋值。（模块的property用于支持命名导出(named export)）。

[warning] 注： 对于 ES2015 模块的 default export，你必须指定模块的 default 属性。

1.1. 使用：jQuery

要自动加载jquery，我们可以将两个变量都指向对应的 node 模块：

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

然后在我们任意源码中：

// in a module
$('#item'); // <= 起作用
jQuery('#item'); // <= 起作用
// $ 自动被设置为 "jquery" 输出的内容

1.2. 使用：jQuery 和 Angular 1

Angular 会寻找window.jQuery来决定 jQuery 是否存在, 查看源码。

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

1.3. 使用：Lodash Map

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

1.3.1. 使用：Vue.js

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