这次给大家带来webpack如何实现热模块替换，webpack实现热模块替换的注意事项有哪些，下面就是实战案例，一起来看一下。
模块热替换(hmr)的作用是，在应用运行时，无需刷新页面，便能替换、增加、删除必要的模块。 hmr 对于那些由单一状态树构成的应用非常有用。因为这些应用的组件是 “dumb” (相对于 “smart”) 的，所以在组件的代码更改后，组件的状态依然能够正确反映应用的最新状态。
webpack-dev-server内置“live reload”，会自动刷新页面。
文件目录如下：
app
a.js
component.js
index.js
node_modules
package.json
webpack.config.js
component.js中导入了a.js。index.js导入了component.js。修改任意一个文件，都能达到热更新功能。
最重要的是，在index.js中，有这样一段代码：（完成热更新必须需要）
if(module.hot){
module.hot.accept(moduleid, callback);
}
下面是package.json配置：
{
name: webpack-hmr,
version: 1.0.0,
description: ,
main: index.js,
scripts: {
start: nodemon --watch webpack.config.js --exec \webpack-dev-server --env development\,
build: webpack --env production
},
keywords: [],
author: ,
license: isc,
devdependencies: {
html-webpack-plugin: ^2.28.0,
nodemon: ^1.11.0,
webpack: ^2.2.1,
webpack-dev-server: ^2.4.1
}
}
从依赖就可以看到，这真的是一个最简单的配置了。其中nodemon用来监听webpack.config.js文件的状态，只要发生改变，就重新执行命令。
关于”html-webpack-plugin”，在这里是可以省略的。具体的配置请看：https://www.npmjs.com/package/html-webpack-plugin 。
在这里，定义了两个命令，一个是start，用于开发环境；一个是build，用于生产环境。--watch用来监听一个或者多个文件，--exec是nodemon用来执行其它的命令。具体的配置请看：https://c9.io/remy/nodemon。
接下来是webpack.config.js了，既然package.json的scripts中定义了两种命令，我们还是要在配置文件中实现两种情况（development和production，你也可以修改配置其中一种）。
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 + '/index.js',
},
output: {
path: paths.build,
filename: '[name].js',
},
watch: true,
plugins: [
new htmlwebpackplugin({
title: 'webpack demo',
}),
],
}
function developmentconfig(){
const config ={
devserver:{
historyapifallback:true, //404s fallback to ./index.html
// hotonly:true, 使用hotonly和hot都可以
hot: true,
stats:'errors-only', //只在发生错误时输出
// host:process.env.host, 这里是undefined，参考的别人文章有这个
// port:process.env.port, 这里是undefined，参考的别人文章有这个
overlay:{ //当有编译错误或者警告的时候显示一个全屏overlay
errors:true,
warnings:true,
}
},
plugins: [
new webpack.hotmodulereplacementplugin(),
new webpack.namedmodulesplugin(), // 更新组件时在控制台输出组件的路径而不是数字id，用在开发模式
// new webpack.hashedmoduleidsplugin(), // 用在生产模式
],
};
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;
};
关于object.assign，第一个参数是目标对象，如果目标对象中的属性具有相同的键，则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性。浅赋值，对于对象的复制使用=，即引用复制。
env参数通过cli传入。
然后打开命令行到当前目录，运行npm start或者npm run build就好啦。注意，前者是在开发环境下，是没有输出文件的（在内存），只有运行后者才会有输出文件。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
mint-ui使用步骤详解
js有哪些属性可以判断页面是否存在滚动条
常用的6大js排序算法与比较
以上就是webpack如何实现热模块替换的详细内容。