首先 · 小小的說一下。
之前辖所，用commonJS惰说，ES6在做模塊化等。用起來略繁瑣缘回。下載各類插件吆视，手動對各類代碼分類，不斷編譯酥宴。
吶啦吧，現(xiàn)在就使用webpack打包一下，現(xiàn)在流行的有webpack拙寡，gulp授滓，主要學(xué)習(xí)webpack。
webpack：打包工具，又成構(gòu)建工具褒墨。
作用：對JS、css擎宝、html郁妈、less、img等等各種各樣的文件绍申，進行合并壓縮噩咪，最后，自動構(gòu)建成上線項目极阅。在webpack中胃碾，會默認將我們的前端資源文件，都當做模塊處理筋搏，生成一個對應(yīng)的靜態(tài)資源仆百。webpack自身只支持JS模塊，但是奔脐，通過插件俄周，我們可以加載任何類型的文件。
開始學(xué)習(xí)吧髓迎！
一峦朗、創(chuàng)建項目，下載webpack
項目{src排龄，webpack.config.js}
src{js波势，css，less橄维，img}
默認入口文件為：項目文件夾下面的：./src/index.js
默認輸出目錄為：項目文件夾項目的：./dist/build.js（打包后自動生成）
- 初始化
npm init
- 全局安裝webpack尺铣、webpack-cli
npm install webpack -g
npm install webpack-cli -g
- 本地安裝webpack、webpack-cli
npm install webpack --save-dev
npm install webpack-cli --save-dev
安裝說明：
1. 在webpack 4 以前争舞，不用安裝webpack-cli即可使用迄埃。在webpack4版本以后，它將webpack和webpack-cli分開處理了兑障，需要安裝一個webpack-cli侄非。
2. cli，命令行工具流译。任何一個軟件逞怨，想在命令行（CMD）里面去使用，必須有cli工具福澡。
3. 實際開發(fā)中叠赦，不會傳輸node_modules文件夾，那么會缺少文件，無法運行除秀。此時糯累，--save發(fā)揮作用：將下載的模塊、插件册踩，添加進正在開發(fā)的項目的依賴中泳姐，即當前下載的插件，添加進：package.json的devDependencies中暂吉。再拿到文件時胖秒，在package.json所在文件夾，執(zhí)行npm install命令慕的，自動下載package.json里面的所有依賴阎肝。
二、運行webpack
webpack4以前的版本肮街，打包命令為： webpack src/entry.js dist/build.js风题。
webpack4版本以后，則將命令精簡了嫉父，直接輸入：webpack 即可俯邓。
默認情況下， webpack會識別當前目錄下的src下面的index.js文件熔号。
默認可以打包ES6稽鞭，但是不會轉(zhuǎn)換ES6，打包完還是ES6語法引镊，想變成朦蕴，需要插件。
三弟头、改變默認設(shè)置
創(chuàng)建：webpack.config.js
①：內(nèi)置模塊設(shè)置路徑吩抓。
②：暴露一波
const path = require("path");
/* 暴露一波 */
module.exports = {
/* 修改webpack的默認設(shè)置 */
/* 設(shè)置入口文件 */
entry:"./src/js/index.js",
/* 設(shè)置輸出文件夾，和輸出js文件 */
output:{
filename:"build.js",
path:path.resolve(__dirname,"dist"),
// publicPath:"./dist/" 這是圖片加載改變路徑
}
四赴恨，兩種打包模式
①：webpack --mode development 開發(fā)模式疹娶，不壓縮
②： webpack --mode production 生產(chǎn)模式，壓縮代碼
代碼有點長伦连，丟到package.json里運行雨饺。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"pro": "webpack --mode production",
"ser": "webpack-dev-server --open"
},
現(xiàn)在，命令行輸入：npm run dev 即可惑淳。
npm run dev
五额港，識別css、less歧焦、img移斩、html
1.下載插件
css-loader,style-loader 負責(zé)處理層疊樣式表
url-loader,file-loader 負責(zé)處理圖片
2.配置webpack.config.js
module:{
rules:[
{
test:/\.css$/,
use:["style-loader","css-loader"]
},
{
test:/\.(png|jpg|gif)$/,
use:[
{
loader:"url-loader",
options:{
limit:8192
}
}
]
},
{
test:/\.less$/,
use:[
{
loader:"style-loader"
},
{
loader:"css-loader"
},
{
loader:"less-loader"
}
]
}
]
}
}
3.圖片問題說明
當圖片大于8kb的時候，無法通過二進制數(shù)據(jù)去讀取,會將圖片復(fù)制一份丟到輸出目錄。需要將我們的資源獲取目錄向瓷，跳轉(zhuǎn)到輸出目錄肠套，并配置 輸出publicPath
publicPath:"./dist/" // 這是圖片加載改變路徑
還可以，直接把html丟進輸出目錄猖任，更加推薦這個方法你稚。
為什么把html丟進dist目錄，而不是去配置publicPath超升，因為熱加載入宦。publicPath的作用哺徊，就是讓整個webpack去這個目錄下尋找資源室琢，而熱加載，本身是不會去任何目錄下面尋找資源落追，webpack的熱加載機制盈滴，是在內(nèi)存空間中，創(chuàng)建一個虛擬內(nèi)存轿钠，然后巢钓，動態(tài)的識別所有源碼， 如果說配置了publicPath疗垛，webpack就會放棄從虛擬內(nèi)存中尋找資源症汹，而是會去dist目錄下面尋找資源，必須打包一次贷腕，dist目錄才會改變背镇，所以，導(dǎo)致熱加載失效泽裳。
六瞒斩、熱加載
1.下載webpack-dev-server
npm install webpack-dev-server --save-dev
2.運行webpack-dev-server
webpack-dev-server ---open
熱加載調(diào)試用的，要上線涮总，還是得編譯打包一次胸囱。
