美文网首页前端实际项目Web前端之路让前端飞
express和webpack配合时热刷新出错的解决方法

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

作者: 一书and一世界 | 来源:发表于2017-01-18 00:14 被阅读207次

出错

[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

解决方法

  1. 把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/')
});
  1. 分别用nodemon和node启动

终端1

nodemon server.js

终端2

node webpack-dev-server

相关文章

网友评论

  • yubang:请教一下webpack.server.js这个文件是干啥用的
    一书and一世界: @yubang 师兄-_-#
    yubang: @一书and一世界 你肯定是认错人了,我不是师兄,还想问问为什么要用webpack
    一书and一世界: @yubang 师兄你又调皮了,就是启动eebpack dev server啊

本文标题:express和webpack配合时热刷新出错的解决方法

本文链接:https://www.haomeiwen.com/subject/beevbttx.html