webpack4引入JQuery的两种方法

桃扇骨 2022-05-19 02:49 236阅读 0赞

非script标签的形式引入JQuery。

# 安装JQuery： #

先安装加载器expose-loader，用于将插件暴露到全局中供其他模块使用:

npm i expose-loader --save

安装JQuery:

npm install jquery --save

以上两个模块也是项目发布依赖的模块，因此安装参数选择--save。

# 如何使用： #

**1.第一种方法：在打包入口文件中直接require并用expose-loader暴露$到全局**

打包入口文件./src/index.js中引入JQuery:

require("expose-loader?$!jquery");

在html文件中引入测试是否全局可用./dist/index.html:

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript" src="main.js"></script>
    </head>
    
    <body>
        <script>
    	    $(function() {
    	        console.log($("body"));
    	    })
        </script>
    </body>
    
    </html>

打包会自动在./dist目录下生成main.js

![70][]

浏览器打开./dist/index.html文件在控制台得到输出结果。

注：如果在js文件中直接使用var $ = require("jquery");引入$无法暴露到全局，只能在当前js文件中使用。

**2.第二种方法：在打包入口文件引入JQuery，在配置文件中暴露到全局**

项目根目录创建配置文件./conf/webpack.dev.js:

const path = require("path");
    module.exports = {
        mode: "development", //打包为开发模式
        entry: "./src/index", //入口文件
        output: { //输出路径和文件名，使用path模块resolve方法将输出路径解析为绝对路径
            path: path.resolve(__dirname, "../dist"),
            filename: "main.js"
        },
        module: {
            rules: [
            	//暴露$和jQuery到全局
    	        {
    	            test: require.resolve('jquery'), //require.resolve 用来获取模块的绝对路径
    	            use: [{
    	                loader: 'expose-loader',
    	                options: 'jQuery'
    	            }, {
    	                loader: 'expose-loader',
    	                options: '$'
    	            }]
    	        }
            ]
        }
    }

入口文件中./src/index.js引入jquery:

require("jquery");

测试文件./dist/html内容不变，打包：

![70 1][]

以上两种引入方式得到的效果一样，第一种引入方式更加简单

[70]: /images/20220519/0a35fc362eee4c709877567d2c6f0ad2.png
[70 1]: /images/20220519/ff75fea58aef472e9125209a503c1e30.png