webpack系列-webpack内置插件ProvidePlugin的应用（定义全局变量，例如vue引入jquery全局使用）

vue+webpack使用ProvidePlugin插件引入jquery

先看一个实例，webpack+vue引入jquery并全局使用，这儿指通过配置，不是在静态页面使用script标签直接引入jquery。

在webpack配置中跟module同级中添加plugins,代码如下：

const webpack = require('webpack')module.exports = { context: path.resolve(__dirname, '../'), // ...其他代码省略 plugins: [ new webpack.ProvidePlugin({  $: 'jquery',  jQuery: 'jquery',  'window.jQuery': 'jquery' }) ], // ... 其他代码省略}

当然要使用jquery,需要npm安装下，即npm i jquery -S

现在你就可以在任意vue页面中不需要import导入jquery就能使用了。

 mounted() { $('#btn').on('click',function(){  console.log('我调用jquery了') }) }

 可以查看下segmentfault上的一个问题：《vue.js+webpack 中怎么引用并全局使用jquery》，但是回答中是有错误的，不需要在main.js在import导入jquery。

ProvidePlugin配置解析路径

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

上面的这种配置就是去node_modules下面找jquery的模块全局引入。

当然还可以配置工程中的路径，也可以指定完整路径：

plugins: [ new webpack.ProvidePlugin({  'utils': path.resolve(path.join(__dirname, '..','src/utils/index.js')) }) ]

我在src/utils/index.js代码中写如下一个方法：

export function sum(a,b) { return a + b}

现在我可以在任意实例页面中调用，如下代码：

mounted() { var result = utils.sum(1,2); console.log(result) // 3 }

 当然我们也可以通过alias属性配置快捷方式，如下代码：

alias: {  'vue$': 'vue/dist/vue.esm.js',  '@': resolve('src'),  'utils': resolve('src/utils/index.js') // 新增的 }

我们再修改下ProvidePlugin的配置，如下代码：

plugins: [ new webpack.ProvidePlugin({  'utils': 'utils' }) ]

这样也是可以的，然后我们在任意实例页面中调用：

mounted() { var result = utils.sum(1,2); console.log(result) // 3 }

 参考

• 《webpack：ProvidePlugin》
•  《实用webpack插件之ProvidePlugin》

原文转载：http://www.shaoqun.com/a/530573.html

跨境电商：https://www.ikjzd.com/

hts：https://www.ikjzd.com/w/525

55海淘：https://www.ikjzd.com/w/1723

vue+webpack使用ProvidePlugin插件引入jquery先看一个实例，webpack+vue引入jquery并全局使用，这儿指通过配置，不是在静态页面使用script标签直接引入jquery。在webpack配置中跟module同级中添加plugins,代码如下：constwebpack=require('webpack')module.exports={conte
薇美铺：薇美铺
stylenanda：stylenanda
速卖通卖家如何快速提升产品曝光？：速卖通卖家如何快速提升产品曝光？
刷脸支付out了？亚马逊刷手支付只需0.3秒！：刷脸支付out了？亚马逊刷手支付只需0.3秒！
2019新年福利：亚马逊最新匹配Order ID步骤方法：2019新年福利：亚马逊最新匹配Order ID步骤方法