Webpack 有非常多的概念,很多名詞長得都差不多。我把這些分散在文件和教程裡的內容總結起來,寫了一份 **webpack 中的易混淆知識點**,目前看是**全網獨一份**,大家可以**加個收藏**,方便以後檢索和學習。 全集連結 ➡️ [webpack 易混淆知識點](https://www.cnblogs.com/skychx/tag/Webpack/) 前兩天為了優化公司的程式碼打包專案,惡補了很多 webpack4 的知識。要是放在幾年前讓我學習 webpack 我肯定是拒絕的,之前看過 webpack 的舊文件,比我們內部專案的文件還要簡陋。 但是最近看了一下 webpack4 的文件,發現 webpack官網的 [指南](https://webpack.docschina.org/guides/) 寫的還不錯,跟著這份指南學會 webpack4 基礎配置完全不是問題,想系統學習 webpack 的朋友可以看一下。
``` 友情提示:本文章不是入門教程,不會費大量筆墨去描寫 webpack 的基礎配置,請讀者配合教程[原始碼](https://github.com/skychx/webpack_learn/tree/master/confuse)食用。 ```
說實話我剛開始看 webpack 文件的時候,對這 3 個名詞雲裡霧裡的,感覺他們都在說打包檔案,但是一會兒 chunk 一會兒 bundle 的,逐漸就迷失在細節裡了,所以我們要跳出來,從巨集觀的角度來看這幾個名詞。 webpack 官網對 chunk 和 bundle 做出了[解釋](https://webpack.docschina.org/glossary),說實話太抽象了,我這裡舉個例子,給大家**形象化**的解釋一下。 首先我們在 src 目錄下寫我們的業務程式碼,引入 index.js、utils.js、common.js 和 index.css 這 4 個檔案,目錄結構如下: ```bash src/ ├── index.css ├── index.html # 這個是 HTML 模板程式碼 ├── index.js ├── common.js └── utils.js ``` index.css 寫一點兒簡單的樣式: ```css body { background-color: red; } ``` utils.js 檔案寫個求平方的工具函式: ```javascript export function square(x) { return x * x; } ``` common.js 檔案寫個 log 工具函式: ```javascript module.exports = { log: (msg) => { console.log('hello ', msg) } } ``` index.js 檔案做一些簡單的修改,引入 css 檔案和 common.js: ```javascript import './index.css'; const { log } = require('./common'); log('webpack'); ``` webpack 的配置如下: ```javascript { entry: { index: "../src/index.js", utils: '../src/utils.js', }, output: { filename: "[name].bundle.js", // 輸出 index.js 和 utils.js }, module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, // 建立一個 link 標籤 'css-loader', // css-loader 負責解析 CSS 程式碼, 處理 CSS 中的依賴 ], }, ] } plugins: [ // 用 MiniCssExtractPlugin 抽離出 css 檔案,以 link 標籤的形式引入樣式檔案 new MiniCssExtractPlugin({ filename: 'index.bundle.css' // 輸出的 css 檔名為 index.css }), ] } ``` 我們執行一下 webpack,看一下打包的結果: ![](http://ww3.sinaimg.cn/large/006tNc79ly1g3g9kn79ntj30o6060ab8.jpg) 我們可以看出,index.css 和 common.js 在 index.js 中被引入,打包生成的 index.bundle.css 和 index.bundle.js 都屬於 chunk 0,utils.js 因為是獨立打包的,它生成的 utils.bundle.js 屬於 chunk 1。 感覺還有些繞?我做了一張圖,你肯定一看就懂: ![image-20200518210532171](https://image-1255652541.cos.ap-shanghai.myqcloud.com/uPic/image-20200518210532171.png) 看這個圖就很明白了: 1. 對於一份同邏輯的程式碼,當我們手寫下一個一個的檔案,它們無論是 ESM 還是 commonJS 或是 AMD,他們都是 **module** ; 2. 當我們寫的 module 原始檔傳到 webpack 進行打包時,webpack 會根據檔案引用關係生成 **chunk** 檔案,webpack 會對這個 chunk 檔案進行一些操作; 3. webpack 處理好 chunk 檔案後,最後會輸出 **bundle** 檔案,這個 bundle 檔案包含了經過載入和編譯的最終原始檔,所以它可以直接在瀏覽器中執行。 一般來說一個 chunk 對應一個 bundle,比如上圖中的 `utils.js -> chunks 1 -> utils.bundle.js`;但也有例外,比如說上圖中,我就用 `MiniCssExtractPlugin` 從 chunks 0 中抽離出了 `index.bundle.css` 檔案。
### 1.1 一句話總結: `module`,`chunk` 和 `bundle` 其實就是同一份邏輯程式碼在不同轉換場景下的取了三個名字: 我們直接寫出來的是 module,webpack 處理時是 chunk,最後生成瀏覽器可以直接執行的 bundle。
---------
最後推薦一下我的個人公眾號:「滷蛋實驗室」,平時會分享一些前端技術和資料分析的內容,大家感興趣的話可以關注一波: ![](https://image-1255652541.cos.ap-shanghai.myqcloud.com/uPic/20190709220