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，看一下打包的結果：  我們可以看出，index.css 和 common.js 在 index.js 中被引入，打包生成的 index.bundle.css 和 index.bundle.js 都屬於 chunk 0，utils.js 因為是獨立打包的，它生成的 utils.bundle.js 屬於 chunk 1。 感覺還有些繞？我做了一張圖，你肯定一看就懂：  看這個圖就很明白了： 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