详细解释webpack引用jquery(第三方模块)的三种方式

前言

在使用webpack作为构建工具和开发vue项目时，不可避免的会使用jquery作为第三方插件(毕竟它来自于使用jquery)，那么如何引用呢？接下来，我将谈谈三种方法。

1 html模板文件引用方法，这是最直接最熟悉的方法，可以在项目的网页模板文件中直接添加jquery引用

A.引用

B.使用

2暴露加载程序引用方法

A.安装jquery

Jquery在NPM ijquery-db.main.js中被引用

从“vue”导入vue，从“导入应用程序”。/app“从导入路由器”。/router ' import $ from ' jquery '/add这行vue . config . production tip=false console . warn('=========main . js output $ console . log($)；console.log(窗口。$);

解释一下，在这个时候，我们会发现我们在main.js中引用jquery，我们可以正常使用$符号，但是window。$不能，helloWorld组件不能引用$；为什么呢？因为webpack最后会以闭包的形式打包代码，所以$对象没有挂载在window下，jquery在helloWorld中也没有被引用，所以无法自然获取。那么如何在main.js中引用一次，每个组件都能得到呢？

C.expose-loader向全世界公开jquery

1)安装暴露加载器

NPM iexpose-loader-D2)web pack . config . js(由vue-CLI创建的项目可以在webpack.base.conf.js中配置)在引用jquery时使用expose-loader。

.module: {rules: [//添加以下配置{ test 3360 require . resolve(' jquery ')、loader:' expose-loader？$' },

3 webpack插件方法，在每个模块中注入$个

web pack . config . js(vue-CLI创建的项目可以在webpack.base.conf.js中配置)

引用webpack

Const webpack=require('webpack ')配置插件

plugins:[新webpack。ProvidePlugin({ $: 'jquery '，jQuery: 'jquery '，jquery: 'jquery '， window.jQuery': 'jquery '，window。$': 'jquery '，})]以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。