面試必備！webpack 中那些易混淆的 5 個知識點

前兩天爲了優化公司的代碼打包項目，惡補了很多 webpack4 的知識。要是放在幾年前讓我學習 webpack 我肯定是拒絕的，之前看過 webpack 的舊文檔，比我們內部項目的文檔還要簡陋。

但是最近看了一下 webpack4 的文檔，發現 webpack官網的指南寫的還不錯，跟着這份指南學會 webpack4 基礎配置完全不是問題，想系統學習 webpack 的朋友可以看一下。

今天我主要分享的是一些 webpack 中的易混淆知識點，也是面試的常見內容。我把這些分散在文檔和教程裏的內容總結起來，目前看是全網獨一份，大家可以加個收藏，方便以後檢索和學習。

友情提示：本文章不是入門教程，不會費大量筆墨去描寫 webpack 的基礎配置，請讀者配合教程源代碼食用。

1.webpack 中，`module`，`chunk` 和 `bundle` 的區別是什麼？

說實話我剛開始看 webpack 文檔的時候，對這 3 個名詞雲裏霧裏的，感覺他們都在說打包文件，但是一會兒 chunk 一會兒 bundle 的，逐漸就迷失在細節裏了，所以我們要跳出來，從宏觀的角度來看這幾個名詞。

webpack 官網對 chunk 和 bundle 做出了解釋，說實話太抽象了，我這裏舉個例子，給大家形象化的解釋一下。

首先我們在 src 目錄下寫我們的業務代碼，引入 index.js、utils.js、common.js 和 index.css 這 4 個文件，目錄結構如下：

src/
├── index.css
├── index.html # 這個是 HTML 模板代碼
├── index.js
├── common.js
└── utils.js

index.css 寫一點兒簡單的樣式：

body {
    background-color: red;
}

utils.js 文件寫個求平方的工具函數：

export function square(x) {
    return x * x;
}

common.js 文件寫個 log 工具函數：

module.exports = {
  log: (msg) => {
    console.log('hello ', msg)
  }
}

index.js 文件做一些簡單的修改，引入 css 文件和 common.js：

import './index.css';
const { log } = require('./common');

log('webpack');

webpack 的配置如下：

{
    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。

感覺還有些繞？我做了一張圖，你肯定一看就懂：

看這個圖就很明白了：

對於一份同邏輯的代碼，當我們手寫下一個一個的文件，它們無論是 ESM 還是 commonJS 或是 AMD，他們都是 module ；
當我們寫的 module 源文件傳到 webpack 進行打包時，webpack 會根據文件引用關係生成 chunk 文件，webpack 會對這個 chunk 文件進行一些操作；
webpack 處理好 chunk 文件後，最後會輸出 bundle 文件，這個 bundle 文件包含了經過加載和編譯的最終源文件，所以它可以直接在瀏覽器中運行。

一般來說一個 chunk 對應一個 bundle，比如上圖中的 utils.js -> chunks 1 -> utils.bundle.js；但也有例外，比如說上圖中，我就用 MiniCssExtractPlugin 從 chunks 0 中抽離出了 index.bundle.css 文件。

一句話總結：

module，chunk 和 bundle 其實就是同一份邏輯代碼在不同轉換場景下的取了三個名字：

我們直接寫出來的是 module，webpack 處理時是 chunk，最後生成瀏覽器可以直接運行的 bundle。

2.`filename` 和 `chunkFilename` 的區別

filename

filename 是一個很常見的配置，就是對應於 entry 裏面的輸入文件，經過webpack 打包後輸出文件的文件名。比如說經過下面的配置，生成出來的文件名爲 index.min.js。

{
    entry: {
        index: "../src/index.js"
    },
    output: {
        filename: "[name].min.js", // index.min.js
    }
}

chunkFilename

chunkFilename 指未被列在 entry 中，卻又需要被打包出來的 chunk 文件的名稱。一般來說，這個 chunk 文件指的就是要懶加載的代碼。

比如說我們業務代碼中寫了一份懶加載 lodash 的代碼：

// 文件：index.js

// 創建一個 button
let btn = document.createElement("button");
btn.innerHTML = "click me";
document.body.appendChild(btn);

// 異步加載代碼
async function getAsyncComponent() {
    var element = document.createElement('div');
    const { default: _ } = await import('lodash');

    element.innerHTML = _.join(['Hello!', 'dynamic', 'imports', 'async'], ' ');

    return element;
}

// 點擊 button 時，懶加載 lodash，在網頁上顯示 Hello! dynamic imports async
btn.addEventListener('click', () => {
    getAsyncComponent().then(component => {
        document.body.appendChild(component);
    })
})

我們的 webpack 不做任何配置，還是原來的配置代碼：

{
    entry: {
        index: "../src/index.js"
    },
    output: {
        filename: "[name].min.js", // index.min.js
    }
}

這時候的打包結果如下：

這個 1.min.js 就是異步加載的 chunk 文件。文檔裏這麼解釋：

output.chunkFilename 默認使用 [id].js 或從 output.filename 中推斷出的值（[name] 會被預先替換爲 [id] 或 [id].）

文檔寫的太抽象，我們不如結合上面的例子來看：

output.filename 的輸出文件名是 [name].min.js，[name] 根據 entry 的配置推斷爲 index，所以輸出爲 index.min.js；

由於 output.chunkFilename 沒有顯示指定，就會把 [name] 替換爲 chunk 文件的 id 號，這裏文件的 id 號是 1，所以文件名就是 1.min.js。

如果我們顯式配置 chunkFilename，就會按配置的名字生成文件：

{
    entry: {
        index: "../src/index.js"
    },
    output: {
        filename: "[name].min.js",  // index.min.js
        chunkFilename: 'bundle.js', // bundle.js
    }
}

一句話總結：

filename 指列在 entry 中，打包後輸出的文件的名稱。

chunkFilename 指未列在 entry 中，卻又需要被打包出來的文件的名稱。

3.`webpackPrefetch`、`webpackPreload` 和 `webpackChunkName` 到底是幹什麼的？

這幾個名詞其實都是 webpack 魔法註釋（magic comments）裏的，文檔中說了 6 個配置，配置都可以組合起來用。我們說說最常用的三個配置。

webpackChunkName

前面舉了個異步加載 lodash 的例子，我們最後把 output.chunkFilename 寫死成 bundle.js。在我們的業務代碼中，不可能只異步加載一個文件，所以寫死肯定是不行的，但是寫成 [name].bundle.js 時，打包的文件又是意義不明、辨識度不高的 chunk id。

{
    entry: {
        index: "../src/index.js"
    },
    output: {
        filename: "[name].min.js",  // index.min.js
        chunkFilename: '[name].bundle.js', // 1.bundle.js，chunk id 爲 1，辨識度不高
    }
}

這時候 webpackChunkName 就可以派上用場了。我們可以在 import 文件時，在 import 裏以註釋的形式爲 chunk 文件取別名：

async function getAsyncComponent() {
    var element = document.createElement('div');
  
    // 在 import 的括號裏 加註釋 /* webpackChunkName: "lodash" */ ，爲引入的文件取別名
    const { default: _ } = await import(/* webpackChunkName: "lodash" */ 'lodash');

    element.innerHTML = _.join(['Hello!', 'dynamic', 'imports', 'async'], ' ');

    return element;
}

這時候打包生成的文件是這樣的：

現在問題來了，lodash 是我們取的名字，按道理來說應該生成 lodash.bundle.js 啊，前面的 vendors~ 是什麼玩意？

其實 webpack 懶加載是用內置的一個插件 SplitChunksPlugin 實現的，這個插件裏面有些默認配置項，比如說 automaticNameDelimiter，默認的分割符就是 ~，所以最後的文件名纔會出現這個符號，這塊兒內容我就不引申了，感興趣的同學可以自己研究一下。

webpackPrefetch 和 webpackPreload

這兩個配置一個叫預拉取（Preload），一個叫預加載（Prefetch），兩者有些細微的不同，我們先說說 webpackPreload。

在上面的懶加載代碼裏，我們是點擊按鈕時，纔會觸發異步加載 lodash 的動作，這時候會動態的生成一個 script 標籤，加載到 head 頭裏：

如果我們 import 的時候添加 webpackPrefetch：

...

const { default: _ } = await import(/* webpackChunkName: "lodash" */ /* webpackPrefetch: true */ 'lodash');

...

就會以 <link rel="prefetch" as="script"> 的形式預拉取 lodash 代碼：

這個異步加載的代碼不需要手動點擊 button 觸發，webpack 會在父 chunk 完成加載後，閒時加載 lodash 文件。

webpackPreload 是預加載當前導航下可能需要資源，他和 webpackPrefetch 的主要區別是：

preload chunk 會在父 chunk 加載時，以並行方式開始加載。prefetch chunk 會在父 chunk 加載結束後開始加載。
preload chunk 具有中等優先級，並立即下載。prefetch chunk 在瀏覽器閒置時下載。
preload chunk 會在父 chunk 中立即請求，用於當下時刻。prefetch chunk 會用於未來的某個時刻

一句話總結：

webpackChunkName 是爲預加載的文件取別名，webpackPreload 會在瀏覽器閒置下載文件，webpackPreload 會在父 chunk 加載時並行下載文件。

4.`hash`、`chunkhash`、`contenthash` 有什麼不同？

首先來個背景介紹，哈希一般是結合 CDN 緩存來使用的。如果文件內容改變的話，那麼對應文件哈希值也會改變，對應的 HTML 引用的 URL 地址也會改變，觸發 CDN 服務器從源服務器上拉取對應數據，進而更新本地緩存。

hash

hash 計算是跟整個項目的構建相關，我們做一個簡單的 demo。

沿用案例 1 的 demo 代碼，文件目錄如下：

src/
├── index.css
├── index.html
├── index.js
└── utils.js

webpack 的核心配置如下（省略了一些 module 配置信息）：

{
    entry: {
        index: "../src/index.js",
        utils: '../src/utils.js',
    },
    output: {
        filename: "[name].[hash].js",  // 改爲 hash
    },
    
    ......
    
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'index.[hash].css' // 改爲 hash
        }),
    ]
}

生成的文件名如下：

我們可以發現，生成文件的 hash 和項目的構建 hash 都是一模一樣的。

chunkhash

因爲 hash 是項目構建的哈希值，項目中如果有些變動，hash 一定會變，比如說我改動了 utils.js 的代碼，index.js 裏的代碼雖然沒有改變，但是大家都是用的同一份 hash。hash 一變，緩存一定失效了，這樣子是沒辦法實現 CDN 和瀏覽器緩存的。

chunkhash 就是解決這個問題的，它根據不同的入口文件(Entry)進行依賴文件解析、構建對應的 chunk，生成對應的哈希值。

我們再舉個例子，我們對 utils.js 裏文件進行改動：

export function square(x) {
    return x * x;
}

// 增加 cube() 求立方函數
export function cube(x) {
    return x * x * x;
}

然後把 webpack 裏的所有 hash 改爲 chunkhash：

{
    entry: {
        index: "../src/index.js",
        utils: '../src/utils.js',
    },
    output: {
        filename: "[name].[chunkhash].js", // 改爲 chunkhash
    },
          
    ......
    
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'index.[chunkhash].css' // // 改爲 chunkhash
        }),
    ]
}

構建結果如下：

我們可以看出，chunk 0 的 hash 都是一樣的，chunk 1 的 hash 和上面的不一樣。

假設我又把 utils.js 裏的 cube() 函數去掉，再打包：

對比可以發現，只有 chunk 1 的 hash 發生變化，chunk 0 的 hash 還是原來的。

contenthash

我們更近一步，index.js 和 index.css 同爲一個 chunk，如果 index.js 內容發生變化，但是 index.css 沒有變化，打包後他們的 hash 都發生變化，這對 css 文件來說是一種浪費。如何解決這個問題呢？

contenthash 將根據資源內容創建出唯一 hash，也就是說文件內容不變，hash 就不變。

我們修改一下 webpack 的配置：

{
    entry: {
        index: "../src/index.js",
        utils: '../src/utils.js',
    },
    output: {
        filename: "[name].[chunkhash].js",
    },
      
    ......
    
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'index.[contenthash].css' // 這裏改爲 contenthash
        }),
    ]
}

我們對 index.js 文件做了 3 次修改（就是改了改 log 函數的輸出內容，過於簡單就先不寫了），然後分別構建，結果截圖如下：

我們可以發現，css 文件的 hash 都沒有發生改變。

一句話總結：

hash 計算與整個項目的構建相關；

chunkhash 計算與同一 chunk 內容相關；

contenthash 計算與文件內容本身相關。

5.`sourse-map` 中 `eval`、`cheap`、`inline` 和 `module` 各是什麼意思？

sourse-map ，裏面都有個 map 了，肯定是映射的意思。sourse-map 就是一份源碼和轉換後代碼的映射文件。具體的原理內容較多，感興趣的同學可以自行搜索，我這裏就不多言了。

我們先從官網上看看 sourse-map 有多少種類型：

emmmm，13 種，告辭。

如果再仔細看一下，就發現這 13 種大部分都是 eval、cheap、inline 和 module這 4 個詞排列組合的，我做了個簡單的表格，比官網上直白多了：

參數	參數解釋
eval	打包後的模塊都使用 `eval()` 執行，行映射可能不準；不產生獨立的 map 文件
cheap	map 映射只顯示行不顯示列，忽略源自 loader 的 source map
inline	映射文件以 base64 格式編碼，加在 bundle 文件最後，不產生獨立的 map 文件
module	增加對 loader source map 和第三方模塊的映射

還不明白？可以看看 demo。

我們對 webpack 做一些配置，devtool 是專門配置 source-map 的。

......

{
    devtool: 'source-map',
}

......

index.js 文件爲了簡便，我們只寫一行代碼，爲了得出報錯信息，我們故意拼錯：

console.lg('hello source-map !') // log 寫成 lg

下面我們試一試常見的幾個配置：

source-map

source-map 是最大而全的，會生成獨立 map 文件：

注意下圖光標的位置，，source-map 會顯示報錯的行列信息：

cheap-sourse-map

cheap，就是廉價的意思，它不會產生列映射，相應的體積會小很多，我們和 sourse-map 的打包結果比一下，只有原來的 1/4 。

eval-source-map

eval-source-map 會以 eval() 函數打包運行模塊，不產生獨立的 map 文件，會顯示報錯的行列信息：

// index.bundle.js 文件

!function(e) {
    // ......
    // 省略不重要的代碼
    // ......
}([function(module, exports) {
    eval("console.lg('hello source-map !');//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi4vc3JjL2luZGV4Mi5qcz9mNmJjIl0sIm5hbWVzIjpbImNvbnNvbGUiLCJsZyJdLCJtYXBwaW5ncyI6IkFBQUFBLE9BQU8sQ0FBQ0MsRUFBUixDQUFXLG9CQUFYIiwiZmlsZSI6IjAuanMiLCJzb3VyY2VzQ29udGVudCI6WyJjb25zb2xlLmxnKCdoZWxsbyBzb3VyY2UtbWFwICEnKSJdLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///0\n")
}
]);

inline-source-map

映射文件以 base64 格式編碼，加在 bundle 文件最後，不產生獨立的 map 文件。加入 map 文件後，我們可以明顯的看到包體積變大了；

// index.bundle.js 文件

!function(e) {

}([function(e, t) {
    console.lg("hello source-map !")
}
]);
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vd2VicGFjay9ib290c3RyYXAiLCJ3ZWJwYWNrOi8vLy4uL3NyYy9pbmRleDIuanMiXSwibmFtZXMiOlsiaW5zdGFsbGVkTW9kdWxlcyIsIl9fd2VicGFja19yZXF1aXJ......

// base64 太長了，我刪了一部分，領會精神

常用配置：

上面的幾個例子都是演示，結合官網推薦)和實際經驗，常用的配置其實是這幾個：

1.source-map

大而全，啥都有，就因爲啥都有可能會讓 webpack 構建時間變長，看情況使用。

2.cheap-module-eval-source-map

這個一般是開發環境（dev）推薦使用，在構建速度報錯提醒上做了比較好的均衡。

3.cheap-module-source-map

一般來說，生產環境是不配 source-map 的，如果想捕捉線上的代碼報錯，我們可以用這個

寫在最後

這篇文章差不多就寫到這裏了，後面我還會寫一些 webapck 打包優化的文章。

從學習 webpack 到這篇輸出差不多花了 2 個星期的時間，個人感覺 webpack 說到底，也就是工具鏈的一環，很多配置內容沒必要像 JavaScript 的內置方法一樣需要記憶，自己寫個大而全的 demo，知道配置項大概能幹個啥，要用的時候查一下就行了。

因此我總結了這篇 webpack 易混淆知識點的文章，大家可以點擊收藏一下，以後準備面試或者複習的時候，看一下就懂個大概了。

最後打個廣告，業餘寫一些數據可視化科普向的文章，目前一週一篇，內容非技術向，比較輕鬆，公衆號 ID 是 sky-chx，大家感興趣的話可以關注一波。

面試必備！webpack 中那些最易混淆的 5 個知識點

面試必備！webpack 中那些易混淆的 5 個知識點

1.webpack 中，`module`，`chunk` 和 `bundle` 的區別是什麼？

一句話總結：

2.`filename` 和 `chunkFilename` 的區別

filename

chunkFilename

一句話總結：

3.`webpackPrefetch`、`webpackPreload` 和 `webpackChunkName` 到底是幹什麼的？

webpackChunkName

webpackPrefetch 和 webpackPreload

一句話總結：

4.`hash`、`chunkhash`、`contenthash` 有什麼不同？

hash

chunkhash

contenthash

一句話總結：

5.`sourse-map` 中 `eval`、`cheap`、`inline` 和 `module` 各是什麼意思？

source-map

cheap-sourse-map

eval-source-map

inline-source-map

常用配置：

寫在最後

MySQL 核心模塊揭祕 | 18 期 | 鎖在內存里長什麼樣*

HttpSecurity 是如何組裝過濾器鏈的

🤖️ 如何逐步關閉 MIUI 無處不在的廣告

【十天自制軟渲染器】DAY 03：畫一個三角形（向量叉乘算法 & 重心座標算法）

React Native 性能優化指南

辛辛苦苦學會的 webpack dll 配置，可能已經過時了

面試必備！webpack 中那些最易混淆的 5 個知識點

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

面試必備！webpack 中那些最易混淆的 5 個知識點

面試必備！webpack 中那些易混淆的 5 個知識點

1.webpack 中，module，chunk 和 bundle 的區別是什麼？

一句話總結：

2.filename 和 chunkFilename 的區別

filename

chunkFilename

一句話總結：

3.webpackPrefetch、webpackPreload 和 webpackChunkName 到底是幹什麼的？

webpackChunkName

webpackPrefetch 和 webpackPreload

一句話總結：

4.hash、chunkhash、contenthash 有什麼不同？

hash

chunkhash

contenthash

一句話總結：

5.sourse-map 中 eval、cheap、inline 和 module 各是什麼意思？

source-map

cheap-sourse-map

eval-source-map

inline-source-map

常用配置：

寫在最後

1.webpack 中，`module`，`chunk` 和 `bundle` 的區別是什麼？

2.`filename` 和 `chunkFilename` 的區別

3.`webpackPrefetch`、`webpackPreload` 和 `webpackChunkName` 到底是幹什麼的？

4.`hash`、`chunkhash`、`contenthash` 有什麼不同？

5.`sourse-map` 中 `eval`、`cheap`、`inline` 和 `module` 各是什麼意思？