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