webpack 里涉及了多种形式的刷新，其中包括文件监听，修改内容时，页面的整体刷新，还有修改组件时，只针对组件的局部刷新。从最基本的 webpack -w，到 webpack-dev-server 与 html-webpack-plugin 的结合，再到 Hot Module Replacement，它们都有其对应的应用场景。

注：本文的内容是对上一篇文章【webpack】的补充与提高，所以，项目结构和文件是相同的。

webpack –watch

webpack 给我们提供了 webpack --watch 这么一个命令，它的简写是 webpack -w。当在 cli 中输入 webpack -w，webpack会开启监听模式，观察项目文件的变化。

这样，你在每次修改完文件后，就无需再运行 webpack -p 去重新编译文件，只需要刷新浏览器，便能看到修改的效果。

所以，这个命令的优点是修改后免编译，缺点是修改完文件后，还是得手动去刷新浏览器。

webpack-dev-server

理想情况下，我们是希望修改完文件后，浏览器会自动刷新，即插件具备livereload的功能。通过文章前面的描述，可以采用 webpack-dev-server 并且设置 inline: true 属性。

当修改 entry 里设置的 JavaScript 文件时，浏览器里的页面也跟着刷新。

但修改 html、css 文件却发现浏览器却没跟着刷新，也就是说，这个插件不会监控 html、css 文件。

所以，你还需要借助 html-webpack-plugin 插件。这样，无论是修改 html文件、js文件，还是 css文件，或其他资源，页面都能自动刷新了。

模块热替换 HMR(Hot Module Replacement)

随着web技术在移动端的发展，单页面应用变得越来越火热。这种应用一般只有一个页面，它由许多组件和模块组成，然后通过ajax结合路由方式去加载不同状态的模块。

一个复杂的单页面应用，通常包含了很多组件，而组件里面又包含很多状态。用户的操作，是从一个组件的状态，到另外一个状态，或者到下一个组件。

但这种单页面应用，在开发时也带来一些问题。

比如，一个申请贷款的项目。第一步是 “填写个人信息”，操作完后进入第二个界面 “绑定并设置银行卡”，继续操作完后进入第三个界面 “选择贷款方式”…等等后续界面的操作。当我们在修改第三个组件 “选择贷款方式” 时，页面会重新刷新，所有之前填写的信息被重置，各种状态被丢失，界面也回到第一个组件，即 “填写个人信息”。要查看修改的效果，还得完成前面界面的操作，直到第三个界面。

又比如，假如某个页面的结构是一个tab切换，里面每一个tab项都是一个组件，默认是显示第一个tab项。但我们在开发第二个tab项时，每次修改和变更，页面又重新刷新到第一个tab项，要查看修改后的效果，还得手动切换到第二个tab项。

这无疑给我们的开发调试带来了一定的阻碍。

模块热替换的概念

依照webpack官网的解释，可以理解为：

模块热替换功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载页面。这使得你可以在独立模块变更后，无需刷新整个页面，就可以更新这些模块，极大地加速了开发时间。

你可以把 HMR 看成是 LiveReload 的一种替换方式。

注意：无论是前面提到的刷新插件、还是HMR，它们都是应用在开发环境中，辅助我们更好的开发项目，与生产环境无关！

模块热替换-react

要实现 模块热替换 的功能，可以通过很多方式。由于涉及到组件化开发，目前最流行的采用 webpack + react 的开发模式，如果你采用的也是 react 开发，那么，你可以使用通过 react-hot-loader 加载器来实现 模块热替换，去刷新 react 组件。

首先安装它：

> npm install --save-dev react-hot-loader@next

然后在 webpack.config.js 中设置：

// webpack.config.js
...
var webpack = require('webpack');
...
  entry: [
    'react-hot-loader/patch', // 开启 React 代码的模块热替换(HMR)

    'webpack-dev-server/client?http://localhost:8080', // 为 webpack-dev-server 的环境打包代码，然后连接到指定服务器域名与端口

    'webpack/hot/only-dev-server', // 为热替换(HMR)打包好代码，only- 意味着只有成功更新运行代码才会执行热替换(HMR)

    path.resolve(__dirname, './src/res/js/main.js')
  ],
  output: {
    path: path.resolve(__dirname, './dist/res/'),
    filename: 'js/[name].js',
    publicPath: '/'
  },

  devServer: {
    inline: true,
    historyApiFallback: true,
    hot: true
  },
....

  plugins: [
    ...
    new webpack.HotModuleReplacementPlugin(), // 开启全局的模块热替换(HMR)
    new webpack.NamedModulesPlugin() // 当模块热替换(HMR)时在浏览器控制台输出对用户更友好的模块名字信息
  ]
...

上面的代码中，entry 的值为一个数组，除了原来的 path.resolve(__dirname, './src/res/js/main.js')， 它还增加了 'react-hot-loader/patch'、'webpack-dev-server/client?http://localhost:8080'、以及 'webpack/hot/only-dev-server' 这三项。

另外，还在 devServer 中开启了 hot 属性，plugins 新增了关于 HMR 的设置。

最后，修改 main.js：

// main.js
import React,{Component} from 'react';
import {render} from 'react-dom';

import Navbar from './navbar';
import Heading from './heading';

import { AppContainer } from 'react-hot-loader';

class HelloReact extends Component {

  constructor() {
    super();
    this.state = {
      num: 0,
      tabIndex: 0
    };
  }

  componentDidMount() {
    var _this = this;

    setInterval(() => {
      var num = _this.state.num;

      num += 1;

      _this.setState({
        num: num
      });
    }, 1000);
  }

  switch(index) {
    this.setState({
      tabIndex: index
    });
  }

  render(){
    return (
      <div>
        <h3 style={{color: 'red'}}>{this.state.num}</h3>
        <div className="switch">
          <button className="" onClick={() => this.switch(0)}>Navbar</button>
          <button className="" onClick={() => this.switch(1)}>Heading</button>
        </div>
        {
          this.state.tabIndex === 0
          ?
          <Navbar />
          :
          <Heading />
        }

      </div>
    )
  }
};

render(<AppContainer><HelloReact /></AppContainer>, document.getElementById('hello-react'));

// 组件热刷新
if (module.hot) {
  module.hot.accept(['./navbar', './heading'], () => {
    render(<AppContainer><HelloReact /></AppContainer>, document.getElementById('hello-react'));
  });
}

在上述代码中，父组件包含了两个子组件 <Navbar /> 和 <Heading />（它们的代码，在此不赘述），父组件设置了一个定时器计数，并且，用户可以切点击 Navbar 和 Heading 按钮来切换这两个子组件的显示隐藏。

这样，我们无论是修改 <Navbar /> 组件，还是修改 <Heading /> 组件，都只更新它们对应的视图，而不会刷新整个页面，父组件里的定时计数也不会被重置。