webpack和 php配合,express和webpack配合时热刷新出错的解决方法

出错

[WDS] App updated. Recompiling...

bundle.js:635 [WDS] Disconnected!

log @ bundle.js:635

bundle.js:631 [WDS] Hot Module Replacement enabled.

bundle.js:631 [WDS] App hot update...

bundle.js:8453 [HMR] Checking for updates on the server...

原因

不能使用nodemon或者supervisor去启动webpack-dev-server

之前因为把express服务和webpack-dev-server在同一个server.js里启动，然后执行nodemon server.js，然后发现出错信息。

折腾了好久，google、百度、问人、还去github提issue，最后还是靠自己解决了。

具体原因是因为nodemon是重启整个进程的，如果用nodemon来启动webpack，那么这样的话会使webpack丢失某些存在内存中的东西，所以不建议使用nodemon来启动webpack。

详细可以看webpack-hot-middleware的issue

解决方法

把express server和webpack-dev-server分开

server.js(express server)

const proxy = require('proxy-middleware')

const url = require('url')

const express = require('express')

const app = express()

app.get('/',function(req,res){

res.sendFile(__dirname+'/src/html/index.html');

})

app.listen(3001)

app.use('/build',proxy(url.parse('http://localhost:3000/build')))

webpack.server.js

const webpack = require('webpack')

const WebpackDevServer = require('webpack-dev-server')

const config = require('./webpack.config')

const compiler = webpack(config)

new WebpackDevServer(compiler, {

publicPath: config.output.publicPath,

inline:true,

hot: true,

historyApiFallback: true

}).listen(3000, 'localhost', function (err, result) {

if (err) {

return console.log(err);

}

console.log('Listening at http://localhost:3000/')

});

分别用nodemon和node启动

终端1

nodemon server.js

终端2

node webpack-dev-server