赞助 webpack,同时从官方商店购买衣服 所有收益将转到我们的 open collective

ProvidePlugin

自动加载模块,而不必到处 importrequire

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

or

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

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

对于 ES2015 模块的 default export,你必须指定模块的 default 属性。

使用:jQuery

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

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

然后在我们任意源码中:

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

使用:jQuery 和 Angular 1

Angular 会寻找 window.jQuery 来决定 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']
});

贡献人员