开始一个React项目(二) 彻底弄懂webpack-dev-server的热更新

前言

webpack-dev-server配置热更新看起来很简单，但是实际上是有很多坑的，目前为止我没有搜到一篇深入讲解这个的，如果你觉得它很简单，那么或许等你看完这篇文章你会有不一样的看法。
由于HMR非常强大，本来这篇文章我是准备总结webpack-dev-server的，最后基本只总结了它的两个参数：inline和hot，其它的配置我会另外再写一篇文章讲解。

模块热替换(Hot Module Replacement)

HMR是webpack最令人兴奋的特性之一，当你对代码进行修改并保存后，webpack 将对代码重新打包，并将新的模块发送到浏览器端，浏览器通过新的模块替换老的模块，这样在不刷新浏览器的前提下就能够对应用进行更新。HMR是一个非常值得去深入研究的东西，它绝不是目前我们看到的大多数技术文章说的配置一个hot参数这么简单，有兴趣的小伙伴可以去看看它的实现原理，目前为止我也只看过一点点。

其实实现HMR的插件有很多，webpack-dev-server只是其中的一个，当然也是优秀的一个，它能很好的与webpack配合。另外，webpack-dev-server只是用于开发环境的。

webpack-dev-server实现自动刷新

全局安装：npm install webpack-dev-server --g (全局安装以后才可以直接在命令行使用webpack-dev-server)

本地安装：npm install webpack-dev-server --save-dev
在webpack的配置文件里添加webpack-dev-server的配置：

module.exports = {
    devServer: {
        contentBase: path.resolve(__dirname, 'build'),
    },
}

webpack-dev-server为了加快打包进程是将打包后的文件放到内存中的，所以我们在项目中是看不到它打包以后生成的文件／文件夹的，但是，这不代表我们就不用配置路径了，配置过webpack.config.js的小伙伴都知道output.path这个参数是配置打包文件的保存路径的，contentBase就和output.path是一样的作用，如果不配置这个参数就会打包到项目的根路径下。有关这几个配置路径的参数我会再写一篇文章总结，这里就不展开了。
当然你也可以选择在命令行中启动的时候加这个参数：

webpack-dev-server --content-base build/

webpack-dev-server支持两种自动刷新方式：

1. Iframe mode
2. Inline mode

使用iframe模式不需要配置任何东西，只需要在你启动的项目的端口号后面加上/webpack-dev-server/即可，比如：
http://localhost:8080/webpack-dev-server/

image.png

打开调试器可以看到webpack-dev-server在页面中嵌入了一个