版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36185028/article/details/81114827
非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内容不变，打包：
以上两种引入方式得到的效果一样，第一种引入方式更加简单
————————————————
版权声明：本文为CSDN博主「骑着代码去流浪」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_36185028/article/details/81114827