非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

浏览器打开./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内容不变，打包：

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

webpack4引入JQuery的两种方法

安装JQuery：

如何使用：

猜你喜欢