webpack 熱更新優化

問題描述

在多頁面專案開發中，開發環境的熱更新下，會發現隨著頁面的增多，熱更新的編譯時間會越來越長，本人專案在十幾頁的情況下，編譯達到30s，這無疑浪費了時間。以下是一種解決方案；

解決方案

這種方案的思路為，開發環境中，每人負責的都是一部分模組或者元件，所以熱更新可以只編譯自己當前需要的頁面，而沒必要把所有的頁面全部編譯。建立一個 selfConfig.js 設定需要儲存的頁面，然後在 webpack 配置中，配置，只屬於需要的頁面去編譯熱更新。加快開發環境中的編譯速度。

// selfConfig.js
module.exports
 
 = [
    'imScence',
    'mLogin'
];

// webpack.base.conf.js  
// 部分關鍵程式碼
const selfConfig = require("./selfConfig");

for (let moduleName of modules) {
  if (selfConfig.length === 0) {
    devEntries[moduleName] = path.join(resolve('src'), 'modules', moduleName, 'main.js');
  } else {
    if (selfConfig.includes(moduleName)) {
      devEntries[moduleName] = path.join
 
(resolve('src'), 'modules', moduleName, 'main.js');
    }
  }
  buildEntries[moduleName] = path.join(resolve('src'), 'modules', moduleName, 'main.js');
}

以上事例設定完成後，只會熱更新兩個頁面，但是這種方案的弊端是，其他頁面本地環境將是白屏打不開（因為壓根沒編譯），所以這種方案還是根據適合自己的場景使用。

注意： 每次修改 selfConfig.js 需要重起 webpack 服務。