1.基本介紹
-
Webpack是一個(gè)靜態(tài)資源打包工具。它會(huì)以一個(gè)或多個(gè)文件作為打包的入口, 將我們整個(gè)項(xiàng)目所有文件編譯組合成一個(gè)或多個(gè)文件輸出出去。 -
輸出的文件就是編譯好的文件,
Webpack輸出的文件叫做bundle。
2.功能介紹
- 開發(fā)模式: 僅能編譯 JS 中的
ES Module語法。 - 生產(chǎn)模式: 能編譯 JS 中的
ES Module語法, - 還能壓縮 JS 代碼。
3.簡單使用
3.1 文件目錄和內(nèi)容
![[webpack] 基本配置 (一),webpack,webpack,前端,node.js](https://imgs.yssmx.com/Uploads/2023/08/638114-1.png)
1.count.js
export default function count(x, y){
return x + y;
}
2.sum.js
export default function sum(...args) {
return args.reduce((p, c) => p + c, 0);
}
3.main.js
import count from "./js/count";
import sum from "./js/sum";
console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));
3.2 下載依賴
1.初始化package.json
npm init -y
![[webpack] 基本配置 (一),webpack,webpack,前端,node.js](https://imgs.yssmx.com/Uploads/2023/08/638114-2.png)
2.下載依賴
npm i webpack webpack-cli -D
3.3 啟動(dòng)webpack
1.開發(fā)模式
npx webpack ./src/main.js --mode=development
2.生產(chǎn)模式
npx webpack ./src/main.js --mode=production
-
npx webpack: 是用來運(yùn)行本地安裝
Webpack包的。 -
./src/main.js: 指定
Webpack從main.js文件開始打包, 不但會(huì)打包main.js, 還會(huì)將其依賴也一起打包進(jìn)來。 -
–mode=xxx: 指定環(huán)境。
![[webpack] 基本配置 (一),webpack,webpack,前端,node.js](https://imgs.yssmx.com/Uploads/2023/08/638114-3.png)
默認(rèn) Webpack 會(huì)將文件打包輸出到 dist 目錄。
index.html引用dist下的man.js
![[webpack] 基本配置 (一),webpack,webpack,前端,node.js](https://imgs.yssmx.com/Uploads/2023/08/638114-4.png)
![[webpack] 基本配置 (一),webpack,webpack,前端,node.js](https://imgs.yssmx.com/Uploads/2023/08/638114-5.png)
4.基本配置
4.1 五大核心概念
- entry（入口）: 指示 Webpack 從哪個(gè)文件開始打包。
- output（輸出）: 指示 Webpack 打包完的文件輸出到哪里去, 如何命名等。
- loader（加載器）: webpack 本身只能處理 js、json 等資源, 其他資源需要借助 loader。
- plugins（插件）: 擴(kuò)展 Webpack 的功能。
- mode（模式）: 開發(fā)模式(development), 生產(chǎn)模式(production)。
![[webpack] 基本配置 (一),webpack,webpack,前端,node.js](https://imgs.yssmx.com/Uploads/2023/08/638114-6.png)
webpack.config.js:
module.exports = {
// 入口
entry: "",
// 輸出
output: {},
// 加載器
module: {
rules: [],
},
// 插件
plugins: [],
// 模式
mode: "",
};
Webpack 是基于 Node.js 運(yùn)行的, 所以執(zhí)行commonJS規(guī)范。
4.2 基本使用
// Node.js的核心模塊，專門用來處理文件路徑
const path = require("path");
module.exports = {
// 入口
// 相對路徑和絕對路徑都行
entry: "./src/main.js",
// 輸出
output: {
// path: 文件輸出目錄，必須是絕對路徑
// path.resolve()方法返回一個(gè)絕對路徑
// __dirname 當(dāng)前文件的文件夾絕對路徑
path: path.resolve(__dirname, "dist"),
// filename: 輸出文件名
filename: "main.js",
},
// 加載器
module: {
rules: [],
},
// 插件
plugins: [],
// 模式
mode: "development", // 開發(fā)模式
};
npx webpack
![[webpack] 基本配置 (一),webpack,webpack,前端,node.js](https://imgs.yssmx.com/Uploads/2023/08/638114-7.png)
文章來源：http://www.zghlxwxcb.cn/news/detail-638114.html
![[webpack] 基本配置 (一),webpack,webpack,前端,node.js](https://imgs.yssmx.com/Uploads/2023/08/638114-8.png)
文章來源地址http://www.zghlxwxcb.cn/news/detail-638114.html
到了這里，關(guān)于[webpack] 基本配置 (一)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
