# 正文

上一节我们完成了生产环境的配置，从本节开始一起来做一些“装修”的工作，让应用骨架的开发体验更好,同时也是解决我们之前留下的坑。

良好的开发体验可以大大提高我们的开发效率，目前有一个明显的缺陷，开发环境中需要手动刷新页面来看效果。

而我们要做的就是 - 搞定他！

使用webpack --watch来动态监听前端文件的改变并实时打包，输出新bundle.js文件，这样文件多了之后打包速度会很慢，此外这样的打包方式不能做到hot replace，即每次webpack编译之后需要手动刷新浏览器。

所以本节我们就是用热更新机制来解决这个问题。

# 热更新

对于热更，相信大家都有所了解，一种是热重载，一种是模块热替换。

我们这里要实现的是模块热替换。

# webpack-dev-server

因为该模块已经内置了热更新机制，只需要进行一些简单的配置就能将这个特性继承到我们的项目中。

所以开发环境中实现热更新推荐使用webpack-dev-server。

ps:webpack-dev-server后面都使用wds简称来代替

该库的作用主要是用来提供静态资源文件的更新和访问。其内部会启动一个基于express的http服务器。 该http服务和浏览器之间使用websocket进行实时通讯。当原始文件作出改动后，wds会实时编译，但是最后的构建文件并没有输出到硬盘，而是全部载入内存，省去了每次对磁盘的 io，所以性能上也较以往的方式有很大的提升。

启动webpack-dev-server服务有2种方式：

1. 通过 cmd line
2. 通过Node.js API

为了可以更加灵活控制，我们采用API方式来启动。

另外还需要结合react-hot-loader库来实现 react 开发环境下的热更新。

# 具体实施

# 端口约定

我们约定webpack-dev-server服务端口为9002，应用骨架的node server启动端口为9001,保持不变。

ps:这些端口可以根据自己的喜好来调整。

# 安装模块

npm i webpack-dev-server -D

react-hot-loader 可以结合 wds 实现热更新过程中保存 react 组件的状态不丢失

npm i react-hot-loader -D

# react-hot-loader 配置

.babelrc` 内增加 `react-hot-loader/babel
// .babelrc
{
  "plugins": ["react-hot-loader/babel"]
}

• 根组件使用热导出

// src/client/app/layout.js

import { hot } from 'react-hot-loader/root';
class Index extends React.Component{
//...
}
export default hot(Index);

• 安装@hot-loader/react-dom

它替换了同一版本的react-dom包，使用了额外的补丁来支持热重新加载。

直接使用react-dom，控制台会出现下面的警告