全称是Hot Module ReplaceMent(HMR)，理解成热模块替换或者模块热替换都可以吧，和.net中的热插拔一个意思，就是在运行中对程序的模块进行更新。这个功能主要是用于开发过程中，对生产环境没有任何帮助(这一点区别.net热插拔)。效果上就是界面的无刷新更新。
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启动，控制台打印出了两条日志。
显示没有东西被热更新。而且这个39,36代表的是模块Id，看起来很不直观，这里可以通过一个插件使其更符合人意
这样名称就直观了。但是我们期待的更新还是没有出来。因为需要实现一个接口
if(module.hot){
module.hot.accept('./component',()=>{
const nextComponent=component();
document.body.replaceChild(nextComponent,demoComponent);
demoComponent=nextComponent;
})
}
并修改component.js:
这个时候页面更新了。每次改动页面上都会增加一个带有hot-update.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的定义是这样的：
小结：从结构来看，一个是id，一个是对应修改的模块。但实际执行更新的是hotApply方法。热更新整个机制还是有点复杂，效果上像MVVM的那种绑定。有兴趣的可以深入研究下。不建议在生产使用HMR，会让整体文件变大，而且对生成没有什么帮助，在下一节会讲样式的加载，style-loader就是用到了HMR。但对于js模块还要写额外的代码，这让人有点不爽。
参考：
https://survivejs.com/webpack/developing/configuring-hmr/
https://webpack.js.org/configuration/dev-server/
