【webpack】-- 模塊熱替換

全稱是Hot Module ReplaceMent(HMR)，理解成熱模塊替換或者模塊熱替換均可以吧，和.net中的熱插拔一個意思，就是在運行中對程序的模塊進行更新。這個功能主要是用於開發過程當中，對生產環境沒有任何幫助(這一點區別.net熱插拔)。效果上就是界面的無刷新更新。

HMR基於WDS，style-loader能夠經過它來實現無刷新更新樣式。可是對於JavaScript模塊就須要作一點額外的處理，怎麼處理繼續往下看。由於HMR是用於開發環境的，因此咱們修改下配置，作兩份準備。一個用於生產，一個用於開發。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

const PATHS = {
  app: path.join(__dirname, 'app'),
  build: path.join(__dirname, 'build'),
};

const commonConfig={
 entry: {
    app: PATHS.app,
  },
  output: {
    path: PATHS.build,
    filename: '[name].js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack demo',
    }),
  ],
}
 
function developmentConfig(){
  const config ={
    devServer:{
      //使能歷史記錄api
      historyApiFallback:true,
       hotOnly:true,//關閉熱替換 註釋掉這行就行
       stats:'errors-only',
      host:process.env.Host,
      port:process.env.PORT,
      overlay:{
        errors:true,
        warnings:true,
      }
    },
     plugins: [
      new webpack.HotModuleReplacementPlugin(),
    ],
  };
   return Object.assign(
    {},
    commonConfig,
    config,
    {
      plugins: commonConfig.plugins.concat(config.plugins),
    }
  );
}

module.exports = function(env){
  console.log("env",env);
  if(env=='development'){
    return developmentConfig();
  }
   return commonConfig;
};

這個webpack.config.js創建了兩個配置，一個是commonConfig，一個是developmentConfig 二者經過env參數來區分，但這個env參數是怎麼來的呢？咱們看看以前的package.json中的一段：

也就是說，若是按照上面的這個配置，咱們經過npm start 啓動的話，進入的就是開發環境配置，若是是直接build，那麼就是生產環境的方式。build方式是 第一節裏面講的 直接經過npm啓動webpack，這就不帶WDS了。另外有了一個 Object.assign語法，將配置合併。這個時候經過npm start啓動，控制檯打印出了兩條日誌。

看起來HRM已經啓動了。可是此時更新一下component.js

日誌顯示沒有東西被熱更新。並且這個39,36表明的是模塊Id，看起來很不直觀，這裏能夠經過一個插件使其更符合人意。

 plugins: [
      new webpack.HotModuleReplacementPlugin(),
       new webpack.NamedModulesPlugin(),
    ],

這個時候再啓動。

這樣名稱就直觀了。可是咱們期待的更新仍是沒有出來。由於須要實現一個接口

import component from './component';
let demoComponent=component();
document.body.appendChild(demoComponent);

//HMR 接口
if(module.hot){
    module.hot.accept('./component',()=>{
        const nextComponent=component();
        document.body.replaceChild(nextComponent,demoComponent);
        demoComponent=nextComponent;
    })
}

並修改component.js:

export default function () {
  var element = document.createElement('h1');
  element.innerHTML = 'Hello webpack';
  return element;
}

這個時候頁面更新了。每次改動頁面上都會增長一個帶有hot-update.js ，相似於下面這樣：

webpackHotUpdate(0,{

/***/ "./app/component.js":
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony default export */ __webpack_exports__["default"] = function () {
  var element = document.createElement('h1');
  element.innerHTML = 'Hello web  ';
  element.className='box';
  return element;
};

/***/ })

})

經過webpackHotUpdate對相應模塊進行更新。0表示模塊的id，"./app/component.js"表示模塊對應的name。結構是webpack(id,{key:function(){}})。function外帶了一個括號，不知道有什麼做用。webpackHotUpdate的定義是這樣的：

this["webpackHotUpdate"] = 
  function webpackHotUpdateCallback(chunkId, moreModules) { // eslint-disable-line no-unused-vars   
         hotAddUpdateChunk(chunkId, moreModules);
        if(parentHotUpdateCallback) parentHotUpdateCallback(chunkId, moreModules);
   } ;

小結：從結構來看，一個是id，一個是對應修改的模塊。但實際執行更新的是hotApply方法。熱更新整個機制仍是有點複雜，效果上像MVVM的那種綁定。有興趣的能夠深刻研究下。不建議在生產使用HMR，會讓總體文件變大，並且對生成沒有什麼幫助，在下一節會講樣式的加載，style-loader就是用到了HMR。但對於js模塊還要寫額外的代碼，這讓人有點不爽。

demo：http://files.cnblogs.com/files/stoneniqiu/webpack-ch3.zip

參考： 

https://survivejs.com/webpack/developing/configuring-hmr/

https://webpack.js.org/configuration/dev-server/

系列：

【webpack】-- 自動刷新與解析

【webpack】-- 入門與解析