开发react程序时实现服务器开发和热替换
2017-07-07 本文已影响45人
sdcV
原理:利用webpackDevMiddleware和webpackHotMiddleware两个中间件完成开发服务器和热替换的配置工作,配置Babel使其支持热替换使用react-hmre。
webpackDevMiddleware可以将webpack的打包功能和Express服务器的资源服务功能合二为一。该中间件可以监视代码的变动,一旦代码变动就会停止提供旧代码资源服务,等待编译完成后提供新的资源服务。
webpackHotMiddleware可以在代码更新后保留程序状态,即实现热替换。
react-hmre预设:配置Babel支持react热替换。
步骤1:新建一个项目目录
步骤2:进入到项目目录,安装相关的包,如下package.json
![](https://img.haomeiwen.com/i6790881/3c987ce4bbea29de.png)
步骤3:配置.babelrc,如下:
![](https://img.haomeiwen.com/i6790881/bf6d96ab9e1a4657.png)
步骤4:配置webpack.config.js,如下:
![](https://img.haomeiwen.com/i6790881/f86c32af5133c315.png)
步骤5:配置express服务器,server.js如下。
![](https://img.haomeiwen.com/i6790881/8b688a8d5769844c.png)
运行方法:npm start