[afterCode] webpack开发服务器和已有服务组合的另一个思路

解决的问题

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.

若是本文你对有用 欢迎请我喝咖啡