根據(jù)尚硅谷在本站的webpack教程整理，懶得發(fā)站內(nèi)鏈接了。

本文是純工具性的文章，用到哪查一下就行了。

*****代碼縮進(jìn)全亂了

基礎(chǔ)

webpack作為靜態(tài)資源打包工具，將項(xiàng)目文件編譯、組合成一個(gè)或多個(gè)文件，使項(xiàng)目可以在瀏覽器上運(yùn)行。webpack的輸出文件稱為bundle。在開發(fā)模式下， webpack可以編譯ES Module內(nèi)容，生產(chǎn)模式下還可以對(duì)js代碼進(jìn)行壓縮。

安裝：npm i webpack webpack-cli -D

啟用：npx webpack ./src/main.js --mode=development，或--mode=production

啟動(dòng)webpack后，默認(rèn)打包輸出到dist目錄下。

基本配置信息

• entry：指示打包入口文件

• output：指示打包輸出路徑、輸出內(nèi)容命名方式

• loader：不同的資源文件需要借助不同的loader被解析，webpack本體只支持js、json等資源

• mode：主要用development模式和production模式

• 開發(fā)模式目的：編譯資源、代碼檢查

樣式資源處理

• CSS：npm i css-loader style-loader -D

• css-loader：將css文件編譯成webpack可識(shí)別的模塊

• style-loader：動(dòng)態(tài)創(chuàng)建style標(biāo)簽，放入css模塊內(nèi)容

• Less：npm i less-loader -D

• less-loader：將less文件編譯成css文件

• Sass、Scss：npm i sass-loader sass -D

• sass-loader：將sass文件編譯成css文件

• sass：被sass-loader用于編譯

• Styl：npm i stylus-loader -D

• stylus-loader：將styl編譯成css

對(duì)于樣式資源，在webpack.config.js中，新增module.rules數(shù)組項(xiàng)，設(shè)置test和use兩個(gè)屬性，test屬性用正則表達(dá)式匹配對(duì)應(yīng)的樣式資源文件，use屬性用于指定使用的loader。典型的配置數(shù)組項(xiàng)如下：

圖片資源處理

圖片資源的loader已內(nèi)置在webpack5中，使用時(shí)新增module.rules數(shù)組項(xiàng)，設(shè)置test為匹配圖片資源的正則表達(dá)式，設(shè)置type為asset。還可設(shè)置parser字段用于將圖片轉(zhuǎn)為data URL格式，示例如下：

?

自動(dòng)清空舊打包資源

設(shè)置output.clean為true即可

字體圖標(biāo)資源處理

asset/resource和asset的區(qū)別：

1. asset/resource相當(dāng)于file-loader, 將文件轉(zhuǎn)化成 Webpack 能識(shí)別的資源，其他不做處理

2. asset相當(dāng)于url-loader, 將文件轉(zhuǎn)化成 Webpack 能識(shí)別的資源，同時(shí)小于某個(gè)大小的資源會(huì)處理成 data URL形式

音視頻資源處理

js格式與兼容性處理

Eslint

用于js、jsx語(yǔ)法檢查

1. npm i eslint-webpack-plugin eslint -D

2. 新建.eslintrx.js配置文件（配置文件實(shí)際支持多種格式，也支持直接寫入package.json）

3. 示例如下：

4. 在webpack.config.js中使用:

注：vscode安裝eslint插件后，會(huì)自動(dòng)進(jìn)行檢查，但會(huì)對(duì)編譯后文件警告或報(bào)錯(cuò)，此時(shí)創(chuàng)建并配置.eslintignore并填寫相關(guān)路徑即可忽略檢查。

Babel

用于將ES6語(yǔ)法的js轉(zhuǎn)換為支持老舊瀏覽器的低版本js

1. npm i babel-loader @babel/core @babel/preset-env -D

2. 創(chuàng)建配置文件babel.config.js（配置文件實(shí)際支持多種格式，也支持直接寫入package.json）

3. 示例如下：

   
   

   在presets中選定Babel插件

• @babel/preset-env: 一個(gè)智能預(yù)設(shè)，允許使用最新的 JavaScript。

• @babel/preset-react：一個(gè)用來(lái)編譯 React jsx 語(yǔ)法的預(yù)設(shè)

• @babel/preset-typescript：一個(gè)用來(lái)編譯 TypeScript 語(yǔ)法的預(yù)設(shè)

4. 在webpack.config.js中啟用babel：

什么****排版啊，不會(huì)做、不想做專欄編輯就套個(gè)markdown謝謝

HTML資源處理

1. npm i html-webpack-plugin -D

2. 配置webpack.config.js：

????3. 在引用打包后資源的html代碼中刪除對(duì)js的引用

webpack自動(dòng)化

1. npm i webpack-dev-server -D

2. 配置webpack.config.js如下：

????3. 執(zhí)行npx webpack serve以啟動(dòng)開發(fā)服務(wù)器，代碼在修改時(shí)會(huì)自動(dòng)化編譯。

生產(chǎn)模式打包

1. 修改配置文件，主要是mode值修改為production，其余的主要是刪除一些只在開發(fā)模式下使用的配置項(xiàng)。

2. 執(zhí)行npx webpack --config <file_name>

3. 為方便執(zhí)行打包指令，可以在package.json中添加：

CSS處理改進(jìn)

打包成單個(gè)css文件

依照前述方法，css文件會(huì)被打包至js文件中，通過js代碼動(dòng)態(tài)創(chuàng)建style標(biāo)簽的方式植入頁(yè)面。該方法會(huì)影響用戶體驗(yàn)，因此需要更改css加載機(jī)制，改為通過link標(biāo)簽加載。

1. npm i mini-css-extract-plugin -D

2. 修改webpack.config.js，除了引用插件外，需要在每一條rules數(shù)組元素的use屬性數(shù)組中添加MiniCssExtractPlugin.loader，例：

兼容性處理

1. npm i postcss-loader postcss postcss-preset-env -D

2. 在rules下的css、scss、less文件規(guī)則中，在其css-loader項(xiàng)的后面，添加

????3. 在package.json中配置browserslist項(xiàng)，以指定兼容瀏覽器版本，例如："browserslist": ["ie >= 8"]

????4. 上述1中內(nèi)容可以改為：

壓縮CSS

1. npm i css-minimizer-webpack-plugin -D

2. 修改配置文件：

高級(jí)配置

開發(fā)體驗(yàn)

sourcemap用于生成源碼和構(gòu)建后代碼的映射關(guān)系，保存在.map后綴的文件中，便于調(diào)試

通常根據(jù)打包模式采用下列用法：

開發(fā)模式：在module.exports中添加devtool: "cheap-module-source-map"

生產(chǎn)模式：添加devtool: "source-map"

cheap-module-source-map項(xiàng)相比正常的source-map項(xiàng)，減去了錯(cuò)誤信息的列映射，使得編譯速度提升

構(gòu)建速度

HotModuleReplacement

HMR/熱模塊替換使得開發(fā)中修改模塊代碼不會(huì)使得項(xiàng)目整體重新編譯，只對(duì)該模塊進(jìn)行修改。

使用時(shí)，在modeule.exports下添加：

為使得js也支持HMR，在main.js中添加

上述手動(dòng)添加測(cè)試代碼的方式在實(shí)際場(chǎng)景下通常不使用，轉(zhuǎn)而使用已有的loader

OneOf

盡管配置文件中使用了正則表達(dá)式來(lái)過濾loader處理的文件，但實(shí)際運(yùn)行中每一個(gè)正則表達(dá)式會(huì)被用于所有文件的匹配，導(dǎo)致匹配loader的檢查速度緩慢（如css文件盡管已經(jīng)匹配了css的loader，也還會(huì)被styl的loader進(jìn)行匹配檢查）。oneof可以優(yōu)化匹配流程，使得每個(gè)文件只能匹配一個(gè)loader。

oneof的使用方法非常簡(jiǎn)單，只需在原有規(guī)則數(shù)組外包裹oneof。示意如下：

Include/Exclude

排除node_modules下的第三方庫(kù)文件（已經(jīng)編譯好的js，不需要再處理），只包含src的文件

Cache

緩存eslint和babel編譯結(jié)果

Thread

多進(jìn)程打包

1. npm i thread-loader -D

2. 使用

   
   

壓縮體積

Tree Shaking

默認(rèn)開啟，用于自動(dòng)移除未使用的代碼

Image Minimizer

壓縮本地圖片體積

1. npm i image-minimizer-webpack-plugin imagemin -D

2. 無(wú)損壓縮安裝：npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D

   有損壓縮安裝：npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D

3. 修改配置文件，以無(wú)損壓縮為例：

   
   

如果打包報(bào)錯(cuò)提示缺少文件（第一次打包會(huì)提示缺少相關(guān)的圖片處理程序）則下載對(duì)應(yīng)文件復(fù)制到對(duì)應(yīng)路徑中。

優(yōu)化性能

Code Split

打包時(shí)也對(duì)js進(jìn)行分割，針對(duì)不同的渲染需求進(jìn)行代碼劃分，減少代碼加載體積。

1. npm i webpack webpack-cli html-webpack-plugin -D

2. 針對(duì)多入口文件，在module.exports.output中添加項(xiàng)：

????3. 針對(duì)多入口文件中相同的引用，將重復(fù)的引用單獨(dú)打包，減少打包體積：

????4. 針對(duì)按需加載，只需使用import方式導(dǎo)入模塊

????5. 針對(duì)單入口文件：

總結(jié)

提升開發(fā)體驗(yàn)

• 使用 Source Map 讓開發(fā)或上線時(shí)代碼報(bào)錯(cuò)能有更加準(zhǔn)確的錯(cuò)誤提示。

提升構(gòu)建速度

• 使用 HotModuleReplacement 只重新編譯修改過的代碼。

• 使用 OneOf 提升loader匹配速度。

• 使用 Include/Exclude 排除或只檢測(cè)某些文件。

• 使用 Cache 對(duì) eslint 和 babel 處理的結(jié)果進(jìn)行緩存。

• 使用 Thead 多進(jìn)程處理 eslint 和 babel 任務(wù)，速度更快。

減少代碼體積

• 使用 Tree Shaking 剔除沒有使用的多余代碼，讓代碼體積更小。

• 使用 @babel/plugin-transform-runtime 插件對(duì) babel 進(jìn)行處理，讓輔助代碼從中引入，而不是每個(gè)文件都生成輔助代碼。

• 使用 Image Minimizer 對(duì)項(xiàng)目中圖片進(jìn)行壓縮，體積更小，請(qǐng)求速度更快。

優(yōu)化代碼運(yùn)行性能

• 使用 Code Split 對(duì)代碼進(jìn)行分割成多個(gè) js 文件，減小單個(gè)文件體積，并行加載 js 速度更快，通過 import 動(dòng)態(tài)導(dǎo)入語(yǔ)法進(jìn)行按需加載。

• 使用 Preload / Prefetch 對(duì)代碼進(jìn)行提前加載。

• 使用 Network Cache 能對(duì)輸出資源文件進(jìn)行更好的命名，以便緩存。

• 使用 Core-js 對(duì) js 進(jìn)行兼容性處理。

• 使用 PWA 能讓代碼離線也能訪問。

真的，3202年還不支持markdown的在線編輯器就是依托答辯，本質(zhì)上和二十年前嵌到php jsp里面那種富文本編輯器沒區(qū)別，甚至更難用。加了一堆華而不實(shí)的分割線，就覺得你們前端很會(huì)搞UX？