详解webpack引用jquery（第三方模块）的三种办法

Webpack集成jQuery的三种配置方法

前言

采用 webpack 构建 vue 项目时，常需引入 jquery 等第三方插件。此处介绍三种引用方式。

HTML模板直接引用法

1. HTML 模板文件引用法，此法最为直接且熟悉，只需在项目的网页模板文件中添加 jquery 引用即可。

a. 引用

b. 使用

使用expose-loader暴露全局变量

2. expose-loader 引用法

a. 安装 jquery

npm i jquery -D

b. 在 main.js 中引用 jquery

import Vue from 'vue'
import App from './App'
import router from './router'
import $ from 'jquery'//加入此行

Vue.config.productionTip = false

console.warn("==============main.js输出$对象======================");
console.log($);
console.log(window.$);

说明：此时 main.js 中虽引用了 jquery，$ 符号可正常使用，但 window.$ 不可用，且 helloWorld 组件中无法获取 $。原因是 webpack 打包采用闭包方式，$ 未挂载至 window，且 helloWorld 组件未引用 jquery。若需在 main.js 中一次引用并使各组件均可获取，应如何处理？

c. 利用 expose-loader 将 jquery 暴露至全局

1) 安装 expose-loader

npm i expose-loader -D

2) 在 webpack.config.js（vue-cli 创建的项目可在 webpack.base.conf.js）中配置，当引用 jquery 时使用 expose-loader

......
 module: {
  rules: [
   //增加以下配置即可
   {
    test: require.resolve('jquery'),
    loader: 'expose-loader?$'
   },
.....

通过ProvidePlugin自动注入模块

3. webpack 插件法，向每个模块注入 $

在 webpack.config.js（vue-cli 创建的项目可在 webpack.base.conf.js）中配置

引用 webpack

const webpack = require('webpack')

配置插件

plugins:[
  new webpack.ProvidePlugin({
   $: "jquery",
   jQuery: "jquery",
   jquery: "jquery",
   "window.jQuery": "jquery",
   "window.$": "jquery",
  })
 ]

以上为本文全部内容，希望对学习有所帮助，欢迎支持本站。