學(xué)習(xí) Webpack5 之路（基礎(chǔ)篇）
前言
對(duì)我來說，掌握一個(gè)工具最好的方式，就是在學(xué)習(xí)的過程中，總結(jié)并記錄，嘗試把自己學(xué)到的東西進(jìn)行表達(dá)并分享，在分享的過程中，找到一個(gè)個(gè)同行的小伙伴，一起交流、學(xué)習(xí)，感受到學(xué)習(xí)技術(shù)的簡(jiǎn)單和純粹。
《學(xué)習(xí) Webpack5 之路》系列文章，標(biāo)題靈感來自樸樹的《平凡之路》，一直渴望一場(chǎng)走到東極島的公路旅行，或許學(xué)習(xí)之路也能和平凡之路一樣，讓我獲得滿足和快樂。
《學(xué)習(xí) Webpack5 之路》系列文章將分為以下 4 個(gè)系列，敬請(qǐng)期待：
基礎(chǔ)篇 實(shí)踐篇 優(yōu)化篇 原理篇
本文依賴的 webpack 版本信息如下：
webpack-cli\@4.7.2[1] webpack\@5.46.0[2]
一、Webpack 是什么
引入 webpack 官網(wǎng)[3] 介紹：
本質(zhì)上，webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的_靜態(tài)模塊打包器(module bundler)_ 。當(dāng) webpack 處理應(yīng)用程序時(shí)，它會(huì)遞歸地構(gòu)建一個(gè)_依賴關(guān)系圖(dependency graph)_ ，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè) bundle。
webpack 官網(wǎng)[4] 圖：
在圖中我們可以看到，webpack 將左側(cè)錯(cuò)綜復(fù)雜的各自不同類型文件的模板依賴關(guān)系，包括 .js、.hbs、.cjs、.sass、.jpg、.png 等類型文件，打包成 .js、.css、.jpg、.png 4 種類型的靜態(tài)資源。
簡(jiǎn)單來說，webpack 就是一個(gè)靜態(tài)資源打包工具，負(fù)責(zé)將項(xiàng)目中依賴的各個(gè)模塊，打包成一個(gè)或多個(gè)文件。
二、為什么選擇 Webpack
本文不進(jìn)行其他打包工具和 webpack 的優(yōu)劣對(duì)比，僅介紹 webpack 能為開發(fā)者做的工作。
1. 模塊化開發(fā)
在沒有各個(gè) webpack 搭建的腳手架（create-react-app、vue-cli 等等）之前，我們通過在 HTML5 文件里引入一個(gè)個(gè) Javascript 文件來進(jìn)行開發(fā)，這就可能導(dǎo)致并行請(qǐng)求數(shù)量過多、存在重復(fù)代碼等問題。
而通過 webpack，我們可以使用 import、require 來進(jìn)行模塊化開發(fā)。
在 webpack 中一切皆模塊，js、css、圖片、字體都是模塊，而且支持靜態(tài)解析、按需打包、動(dòng)態(tài)加載、代碼分離等功能，幫助我們優(yōu)化代碼，提升性能。
import { Hello } from './hello.js'
import './assets/style.css'
import MyImage './assets/img.jpg'
復(fù)制代碼
2. 新語(yǔ)法
Javascript、CSS 的語(yǔ)法規(guī)范在不斷更新，但是瀏覽器的兼容性卻不能同步的更新，開發(fā)者可以通過 webpack 預(yù)處理器進(jìn)行編譯，自由的使用 JS、CSS 等語(yǔ)言的新語(yǔ)法。
webpack 使用 loader[5] 對(duì)文件進(jìn)行預(yù)處理。你可以構(gòu)建包括 JavaScript 在內(nèi)的任何靜態(tài)資源，如 Less、Sass、ES6、TypeScript。
通過預(yù)處理器將 TypeScript 編譯成 JavaScript、SCSS 編譯成 CSS、ES6 編譯成 ES5 等。
開發(fā)者還可以使用 Node.js 輕松編寫自己的 loader。
常用預(yù)處理器：
`babel-loader`[6] 使用 Babel[7] 加載 ES2015+ 代碼并將其轉(zhuǎn)換為 ES5； `less-loader`[8] 加載并編譯 LESS 文件； `sass-loader`[9] 加載并編譯 SASS/SCSS 文件； `postcss-loader`[10] 使用 PostCSS[11] 加載并轉(zhuǎn)換 CSS/SSS 文件。
3. 主流框架腳手架
Vue 腳手架 vue-cli、React 腳手架 creact-react-app、Taro 腳手架 taro-cli 都是使用 webpack，開發(fā)者掌握 webpack 后，可以自由配置腳手架，根據(jù)項(xiàng)目需要，調(diào)整 webpack 配置，以提高項(xiàng)目性能。
4. 其他
webpack 除了讓開發(fā)者能夠擁有【模塊化開發(fā)+新語(yǔ)言+新框架】的開發(fā)體驗(yàn)。
還有以下優(yōu)點(diǎn)：
擁有依賴管理、動(dòng)態(tài)打包、代碼分離、按需加載、代碼壓縮、靜態(tài)資源壓縮、緩存等配置； webpack 擴(kuò)展性強(qiáng)，插件機(jī)制完善，開發(fā)者可自定義插件、loader； webpack 社區(qū)龐大，更新速度快，輪子豐富；
如使用 ant-design 搭建的中后臺(tái)項(xiàng)目，ant-desgin 提供了 webpack 定制主題的相關(guān)文檔，較其他打包工具定制起來就簡(jiǎn)單很多，易上手。
因?yàn)?webpack 的這些優(yōu)點(diǎn)，大部分的大型項(xiàng)目會(huì)選擇 webpack 進(jìn)行項(xiàng)目構(gòu)建。
三、Webpack 的基本概念介紹
1. dependency graph（依賴圖）
上文有提到，當(dāng) webpack 處理應(yīng)用程序時(shí)，它會(huì)遞歸地構(gòu)建一個(gè)_依賴關(guān)系圖(dependency graph)_，那么依賴關(guān)系圖是什么呢？
依賴圖指的就是文件和文件直接的依賴關(guān)系，如上文引入過的圖：
webpack 通過依賴關(guān)系圖可以獲取非代碼資源，如 images 或 web 字體等。并會(huì)把它們作為 依賴 提供給應(yīng)用程序。
每個(gè)模塊都可以明確表述它自身的依賴，在打包時(shí)可根據(jù)依賴進(jìn)行打包，避免打包未使用的模塊。
2. entry（入口）
入口是指依賴關(guān)系圖的開始，從入口開始尋找依賴，打包構(gòu)建。
webpack 允許一個(gè)或多個(gè)入口配置。
配置示例如下：
module.exports = {
entry: 'index.js',
};
復(fù)制代碼
3. output（輸出）
輸出則是用于配置 webpack 構(gòu)建打包的出口，如打包的位置，打包的文件名等等。
配置示例如下：
module.exports = {
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js',
},
};
復(fù)制代碼
4. loader
webpack 自帶 JavaScript 和 JSON 文件的打包構(gòu)建能力，無需格外配置。
而其他類型的文件，如 CSS、TypeScript，則需要安裝 loader 來進(jìn)行處理。
loader 讓 webpack 能夠去處理其他類型的文件，并將它們轉(zhuǎn)換為有效 模塊[12]，以供應(yīng)用程序使用，以及被添加到依賴圖中。
配置示例如下：
module.exports = {
module: {
rules: [{ test: /.txt$/, use: 'raw-loader' }],
},
};
復(fù)制代碼
5. plugin（插件）
插件則是用于擴(kuò)展 webpack 的能力，常見的插件有：
ProgressBarPlugin[13]：編譯進(jìn)度條； BundleAnalyzerPlugin[14]：打包體積分析； MiniCssExtractPlugin[15]：提取 CSS 到獨(dú)立 bundle 文件。
配置示例如下：
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通過 npm 安裝
module.exports = {
plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};
復(fù)制代碼
插件豐富，開發(fā)者社區(qū)同樣提供了大量插件，也使得 webpack 的可用功能更加多樣。
6. mode（模式）
webpack5 提供了模式選擇，包括開發(fā)模式、生產(chǎn)模式、空模式，并對(duì)不同模式做了對(duì)應(yīng)的內(nèi)置優(yōu)化?？赏ㄟ^配置模式讓項(xiàng)目性能更優(yōu)。
配置示例如下：
module.exports = {
mode: 'development',
};
復(fù)制代碼
7. resolve（解析）
resolve 用于設(shè)置模塊如何解析，常用配置如下：
alias：配置別名，簡(jiǎn)化模塊引入； extensions：在引入模塊時(shí)可不帶后綴； symlinks：用于配置 npm link 是否生效，禁用可提升編譯速度。
配置示例如下：
module.exports = {
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.d.ts'],
alias: {
'@': paths.appSrc,
},
symlinks: false,
}
}
復(fù)制代碼
8. optimization（優(yōu)化）
optimization 用于自定義 webpack 的內(nèi)置優(yōu)化配置，一般用于生產(chǎn)模式提升性能，常用配置項(xiàng)如下：
minimize：是否需要壓縮 bundle； minimizer：配置壓縮工具，如 TerserPlugin、OptimizeCSSAssetsPlugin； splitChunks：拆分 bundle； runtimeChunk：是否需要將所有生成 chunk 之間共享的運(yùn)行時(shí)文件拆分出來。
配置示例如下：
module.exports = {
optimization: {
minimizer: [
// 在 webpack@5 中，你可以使用 `...` 語(yǔ)法來擴(kuò)展現(xiàn)有的 minimizer（即 `terser-webpack-plugin`），將下一行取消注釋
// `...`,
new CssMinimizerPlugin(),
],
splitChunks: {
// include all types of chunks
chunks: 'all',
// 重復(fù)打包問題
cacheGroups:{
vendors:{ //node_modules里的代碼
test: /[\\/]node_modules[\\/]/,
chunks: "all",
name: 'vendors', //chunks name
priority: 10, //優(yōu)先級(jí)
enforce: true
}
}
},
},
}
復(fù)制代碼
以上對(duì) webpack 的基本概念做了簡(jiǎn)單的介紹，為后續(xù)實(shí)踐篇做準(zhǔn)備。
四、總結(jié)
本文從 webpack 是什么、為什么選擇 webpack、webpack的基本概念介紹 3個(gè)角度進(jìn)行講述，從 Webpack 基礎(chǔ)著手，和你一起了解 webpack。
《學(xué)習(xí) Webpack5 之路》系列文章將分為以下 4 個(gè)系列：
基礎(chǔ)篇 實(shí)踐篇 優(yōu)化篇 原理篇
下一篇《學(xué)習(xí) Webpack5 之路（實(shí)踐篇）》將從實(shí)踐出發(fā)，一起完成一個(gè)比較完整的 webpack 配置，敬請(qǐng)期待。
本文源碼：webpack Demo0：https://github.com/jiaozitang/webpack-demo/tree/release_v0
希望能對(duì)你有所幫助，感謝閱讀～
別忘了點(diǎn)個(gè)贊鼓勵(lì)一下我哦，筆芯??
關(guān)于本文
來源：清湯餃子
https://juejin.cn/post/6991630925792542750