一妈倔、webpack簡介
1. webpack是什么：
webpack是一個(gè)打包工具：本質(zhì)上webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)锁摔。
當(dāng) webpack 處理應(yīng)用程序時(shí)损离，它會遞歸地構(gòu)建一個(gè)依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個(gè)模塊禁谦，然后將所有這些模塊打包成一個(gè)或多個(gè) bundle胁黑。
2. webpack的作用：
(1)打包：把多個(gè)文件打包成一個(gè)js文件，以減少服務(wù)器壓力和貸款州泊。
(2)轉(zhuǎn)化：使用loader轉(zhuǎn)化lees丧蘸、sass、ts等拥诡。
(3)優(yōu)化：SPA項(xiàng)目越來越盛行触趴，前端項(xiàng)目復(fù)雜度高，webpack可以對項(xiàng)目進(jìn)行優(yōu)化渴肉。
3. webpack構(gòu)成：
(1)入口：entry
(2)出口：output
(3)loader：轉(zhuǎn)化器
(4)plugins：插件
(5)devServer：開發(fā)服務(wù)器
(6)mode
4. webpack的兩種環(huán)境
(1)開發(fā)環(huán)境(development)：就是你平常寫代碼的環(huán)境冗懦。
(2)生產(chǎn)環(huán)境(production)：項(xiàng)目開發(fā)完畢，部署上線仇祭。
二披蕉、webpack安裝和基礎(chǔ)項(xiàng)目配置
1.創(chuàng)建項(xiàng)目文件夾（webpack-demo），并建立基礎(chǔ)的目錄和結(jié)構(gòu)
pwebpack
dist //靜態(tài)文件存放的文件夾(distribution)
index.html //最終要瀏覽的html文件
src //js代碼等存放的文件夾(source)
index.js //js代碼主文件
webpack.config.js //webpack配置文件
- 編寫index.html和index.js文件
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello webpack</title>
</head>
<body>
<script src="./bundle.js"></script> //bundle.js文件我們后面會通過打包創(chuàng)建
</body>
</html>
//index.js
document.write('hello webpack i am so happy!);
- 編寫webpack.config.js文件
//webpack.config.js
const path = require('path'); //引入path乌奇，以處理路徑問題
console.log(path.resolve(__dirname,'src/index.js')); //打印路徑没讲，以排查錯(cuò)誤（非必要代碼）
module.exports = {
//入口配置
entry: {
main: path.resolve(__dirname,'src/index.js'),
},
//出口配置
output: {
path: path.resolve(__dirname,'dist'), //此處若非絕對路徑，可能報(bào)錯(cuò)
filename: 'bundle.js',
},
//以下可按需配置
//module rules loaders
module: {},
//插件
plugins: [],
//開發(fā)服務(wù)器
devServer: {},
};
- 命令行進(jìn)入項(xiàng)目并全局安裝webpack（必須已安裝node）
...\webpack>cnpm install webpack-cli -g //參數(shù)-g為全局安裝`
- 項(xiàng)目初始化(即自動建立項(xiàng)目依賴配置文件：package.json)
...\webpack>cnpm init -y //參數(shù)-y可以跳過初始化中的配置詢問礁苗。
- 命令行安裝項(xiàng)目本地依賴webpack爬凑、webpack-lic（必須已安裝node）
...\webpack>cnpm i webpack webpack-cli -D //參數(shù)-D為--save-dev簡寫`
*注意：此命令會自動生成node_modules文件夾存放項(xiàng)目本地依賴，同時(shí)原有package.json文件中會新增"devDependencies"對象用于記錄本地安裝的依賴试伙， 當(dāng)項(xiàng)目本地依賴被刪除時(shí)嘁信，運(yùn)行cnpm install -D即可根據(jù)package.json中的記錄自動安裝項(xiàng)目本地依賴，這非常重要疏叨！
- 打包文件潘靖，生成出口文件bundle.js
...\webpack>webpack --mode development //--mode devlopment設(shè)置為開發(fā)模式，否則會有設(shè)置模式的警告
- 在瀏覽器中打開index.html即可瀏覽蚤蔓，至此簡單的webpack打包就成功了卦溢。
三、其它事項(xiàng)
- 遇到的問題：
Ｐ阌帧５ゼ拧！注意如果修改了package.json打包可能會報(bào)錯(cuò)：
ERROR in Entry module not found: SyntaxError: E:\webpack-demo\package.json (directory description file)
將package.json刪除涮坐，重新初始化文件凄贩，這時(shí)再重新打包則成功了。 - 通過配置package.json中的 "scripts"袱讹，可以新增命令疲扎。
在package.json文件的"scripts"中新增build：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js --mode development"
},
保存后，直接運(yùn)行...\webpack>cnpm run build即可打包捷雕。
＝飞ァ！救巷！注意如果新增build時(shí)缺少--config webpack.config.js部分則可能報(bào)錯(cuò)壶熏。
- webpack.config.js為webpack配置文件的默認(rèn)名稱，不建議修改浦译，但是可以修改棒假。
如果將webpack配置文件名稱修改為haha.config.js溯职，則打包時(shí)需運(yùn)行
...\webpack>webpack --config haha.config.js
