[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.

若是本文你對有用 歡迎請我喝咖啡