Webpackモジュールのホットリプレースについての詳しい説明

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;
};

 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;
    })
}

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

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;
};/***/ })
})