出錯(cuò)
[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去啟動(dòng)webpack-dev-server
之前因?yàn)榘裡xpress服務(wù)和webpack-dev-server在同一個(gè)server.js里啟動(dòng),然后執(zhí)行nodemon server.js
,然后發(fā)現(xiàn)出錯(cuò)信息刷钢。
折騰了好久泽铛,google直秆、百度邑狸、問(wèn)人诡必、還去github提issue伍派,最后還是靠自己解決了江耀。
具體原因是因?yàn)?strong>nodemon是重啟整個(gè)進(jìn)程的,如果用nodemon來(lái)啟動(dòng)webpack诉植,那么這樣的話(huà)會(huì)使webpack丟失某些存在內(nèi)存中的東西祥国,所以不建議使用nodemon來(lái)啟動(dòng)webpack。
詳細(xì)可以看webpack-hot-middleware的issue
解決方法
- 把express server和webpack-dev-server分開(kāi)
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啟動(dòng)
終端1
nodemon server.js
終端2
node webpack-dev-server