阅读(2405) (28)

ProvidePlugin

2023-05-24 17:17:16 更新

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

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

or

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

默认情况下,模块解析路径为当前文件夹(​./**​)和 ​node_modules​ 。

还可以指定完整路径:

const path = require('path');

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

每当在模块中遇到标识符作为自由变量时,模块都会自动加载,并将标识符填充为加载的模块的导出(或属性,以支持命名导出)。

要导入ES2015模块的默认导出,必须指定模块的默认属性。

Usage: jQuery

为了自动加载 ​jquery​ ,我们可以将其公开的两个变量指向相应的​ 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是否存在,请参见源代码

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'],
});