这次给大家带来怎样对webpack模块进行热替换，对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模块还要写额外的代码，这让人有点不爽。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
怎样搭建vue2.0+boostrap项目
如何用vue设置proxytable参数跨域
angular入口组件与声明式组件案例对比
以上就是怎样对webpack模块进行热替换的详细内容。