解决的问题

1. webpack hot module reload在某些情况下无法自动更新 react 应用

2. 对已有的服务侵入式的修改.

3. 开发时需要在两个端口上启动两个服务器,一个backend server一个webpack devserver

方法

webpack config

webpack.config.js 采用react-hot-boilerplate

注意修改自己的entry中服务器的地址和端口,直接改成backend server的ip和端口

output.publicPath 也要修改成backend server中对应的静态文件的路径,如

publicPath: 'http://127.0.0.1:4000/dist/'

backend server的修改

已有的backend server express server 导出为 backendApp.

定义app.js 如下

var WebPackDevServer = require('webpack-dev-server')
var backendApp = require('./backendApp')

if (process.env.NODE_ENV !== 'production') {
  var webpack = require('webpack');
  var config = require('./webpack.config.dev');

  const compiler = webpack(config);
  var devServer = new WebPackDevServer(compiler,{
    noInfo: true,publicPath: config.output.publicPath,hot: true,contentBase: false
  })
  devServer.app.use(backendApp)

  module.exports = devServer
} else {
  module.exports = expressApp
}

devServer.app.use(backendApp) 这行就是这个思路的关键,相当于dev server mixin了backend server的所有功能,并且替换了需要编译的js静态文件,使得他们具有hot reload的功能.

启动服务

我们项目的习惯会为每个项目建立一个boot.js启动服务的文件,也可以选择其他方式启动服务,其实就是调用app.listen启动服务.

var app = require('./app');
var port = process.env.PORT || 4000

app.listen(port,function () {
  console.log('helloworld server listening on port ' + port)
})

这样就能在开发阶段只需要开启backend server就能享受webpack devserver带来的自动重新编译功能和gaearon大神带来的react reload.

如果本文你对有用 欢迎请我喝咖啡