webpack的ProvidePlugin配置

最新推荐文章于 2023-03-11 23:45:14 发布

lily_Chine

最新推荐文章于 2023-03-11 23:45:14 发布

阅读量2.3w

点赞数 1

分类专栏：读书文章标签：插件

本文链接：https://blog.csdn.net/u013496115/article/details/78614614

版权

读书专栏收录该内容

8 篇文章 1 订阅

订阅专栏

webpack的插件使用方式：

plugins: [
    new webpack.ProvidePlugin({}),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
]或者
new HtmlWebpackPlugin({
    template: './src/index.html'
})

前者是webpack内置的模块，后者不是webpack内置的模块，需要使用npm先进行安装再使用

ProvidePlugin，是webpack的内置模块
使用ProvidePlugin加载的模块在使用时将不再需要import和require进行引入，使用语法：

new ProvidePlugin({
    identifier: 'module1',
})

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

以jquery为例，用ProvidePlugin进行实例初始化后，jquery就会被自动加载并导入对应的node模块中

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
})
然后我们可以在代码中直接使用，
// in a module
$('#item'); // <= just works
jQuery('#item'); // <= just works
// $ is automatically set to the exports of module "jquery"