多入口 Webpack 熱更新失效？

前言

Webpack 對於現代前端開發者，想必是至關熟悉了，在不少項目中，應用很是普遍，而 webpack-dev-server，相信你們應該也都接觸過。最近，做者在配置多入口，熱更新在單入口是好使的，結果到了多入口很差使？，而後經過 Google 尋找答案，找到了一篇 issue，HMR not working with multiple entries，跟個人問題相似，好像真的有 BUG？看到做者回復

v4 修復了該問題，我丟，我還在使用 v3，翻看 v4 文檔

此時，只有一個感受，熱更新都多久的東西了，不該該存在多入口，熱更新有問題吧？升級到 v4 以後，仍是不行，當時我這暴脾氣就上來了，直接翻看源碼。翻看源碼以前，首先要對熱更新是個什麼，有個基礎的瞭解。

模塊熱更新

模塊熱更新(Hot Module Replacement)是指在瀏覽器運行過程當中，替換、添加或刪除模塊，而無需從新加載整個頁面。

• 保留在徹底從新加載頁面期間丟失的應用程序狀態
• 在源代碼中對 CSS/JS 進行修改，會馬上在瀏覽器中進行更新，並只更新改變的內容，節省開發時間

對比 Live Reload 方案，HMR 體現了其強大之處，實時模塊熱刷新和保存應用狀態，極大的提升了開發效率和開發體驗。

啓用模塊熱更新

HMR 的啓用十分簡單，一個帶有熱更新功能的 webpack.config.js 文件的配置以下：

const path = require('path');

module.exports = {
    // ...
    entry: {
        app: ['./src/index.js']
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        hot: true,
        historyApiFallback: true,
        compress: true
    }
};

src/index.js

if (module.hot) {
    module.hot.accept();
}

原理

網上關於 Webpack 熱更新原理文章不少，這裏就不詳細描述了，推薦幾個。

• 模塊熱更新
• 輕鬆理解 webpack 熱更新原理
• Webpack HMR 原理解析

調試

npm link

$ git clone https://github.com/webpack/webpack-dev-server.git

必定要找到你項目中對應的版本包，對號入座噢，不然會報錯，把 webpack-dev-server 項目拉下來以後，嘗試在 webpack-dev-server/lib/Server.js 該文件增長一行 console.log

而後進入根目錄

$ cd webpack-dev-server
$ npm link

生成軟鏈

cd 項目地址
npm link webpack-dev-server

link 成功以後，會提示下面，更換了 webpack-dev-server 地址

jiang@JiangdeMacBook-Pro-3 commonVideoClient % cnpm link webpack-dev-server
/Users/jiang/Desktop/commonVideoClient/node_modules/webpack-dev-server -> /usr/local/lib/node_modules/webpack-dev-server -> /Users/jiang/Desktop/webpack-dev-server

而後在項目跑 webpack-dev-server，在控制檯應該就會看到對應的輸出了，調試源碼很是方便。

npm link 方案，第三方庫和項目屬於不一樣的項目，它們有本身的 node_modules，若是第三方庫和項目都使用了同一個依賴，它們會在各自的 node_modules 去查
找，若是這個依賴不支持多例，應用就會異常。

yalc

在開發和創做多個包（私有或公共）時，您常常發現本身須要在本地環境中正在處理的其餘項目中使用最新/WIP 版本，而無需將這些包發佈到遠程註冊中心。NPM 和 Yarn 使用相似的符號連接包( npm/yarn link)方法解決了這個問題。雖然這在許多狀況下可能有效，但它常常帶來使人討厭的約束和依賴解析、文件系統之間的符號連接互操做性等問題。

全局安裝 yalc

npm install -g yalc

生成 yalc 包

$ cd webpack-dev-server
$ yalc publish

能夠在本身本地 /Users/jiang/.yalc/packages/webpack-dev-server，找到對應的包

cd 項目地址
yalc link webpack-dev-server

link 後，能夠在本身項目下，找到 .yalc

每次手動修改第三方庫的代碼，都須要手動 link，就很麻煩，對不對？ok，神器來了，nodemon，

npm install -g nodemon

nodemon
--ignore dist/
--ignore node_modules/
--watch lib # 觀察目錄
-C # 只在變動後執行，首次啓動不執行命令
-e js,ts,html,less,scss 監控指定後綴名的文件
--debug # 調試
-x "yalc publish" 自定義命令

而後，咱們來試試這個工具，在 webpack-dev-server，新增三行可執行命令

運行下 npm run watch，而後每次修改，都會自動更新，是否是很舒服？

<img width="119" alt="WeChat7c8e2813667093e82dc47a836e6d5cdb" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6fcceba8aa0543799b4e897141912f13~tplv-k3u1fbpfcp-zoom-1.image">

網頁調試

找到對應的文件位置和代碼行數，經過瀏覽器進行斷點調試，這個就不展開講了。

找到問題

通過一番折騰，升級 webpack-dev-server@v4，原理分析，源碼調試，與以前正常的單頁應用進行對比，發現都是正常的，仍是不行，我就鬱悶了，爲什麼呢？忽然之間，我悟了，好像多頁應用沒有在入口進行 module.hot

以前在 app.jsx 中寫的 module.hot

改在入口文件 進行 module.hot

ok，成功，喜大普奔。

總結

帶着問題，閱讀源碼是最高效的，這樣你在閱讀源碼的過程當中也不會感到無聊，由於你是要解決問題，纔會去看源碼，對於不懂的代碼，一點一點調試，一步一步走下去，再結合現有的一些原理文章（站在巨人的肩膀上）就會找到答案。此次的經歷，也算頗有意思，感謝小夥伴們的閱讀，喜歡的能夠點個贊噢 🌟 ～