webpack热模块替换（HMR）/热更新的方法

这是一篇关于webpack热模块替换的最简单的配置（不需要react），也称作热更新。

模块热替换(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;};