版權聲明：本文為博主原創文章，遵循 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
webpack4引入JQuery的兩種方法
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。