Webpack2 Hot Module重新加载Express.js Universal React应用程序

通用应用程序的webpackconfiguration通常是一个configuration对象的数组，如：

module.exports = [ { name: 'client', entry: { app: [...require("./loaders").hotLoaders, "./src/frontend/client"], libs: [ 'react', 'react-dom' ] }, output: { path: path.join(__dirname, "../../www"), filename: "js/[name].bundle.js" }, ... }, { name: 'server', target: 'node', entry: { server: ["./src/universal/server"], express: ["./src/universal/express"] }, output: { path: path.join(__dirname, "../../www"), filename: "js/[name].bundle.js" } ... }]; 

在运行webpack --config build/webpack/prod.js ，我可以在生产环境中执行以下操作，只需运行server.express块的输出，如node www/express.bundle.js 。

 // src/universal/express.tsx import SERVER from "./server" const express = require("express"); const app = express(); app.use(express.static('www')); app.use(require("morgan")('combined')); app.use(SERVER); app.listen(3000); 

而为了发展，我可以node hot.js ，我得到HMR工作很好。

 // hot.js const app = require("express")(); const compiler = require('webpack')(require('./build/webpack/prod.js')); app.use(require('webpack-dev-middleware')(compiler); app.use(require('webpack-hot-middleware')(compiler.compilers.find(compiler => compiler.name === 'client'))); app.use(require("morgan")('combined')); app.use(require("./www/server.bundle").default); app.listen(3000); 

HMR的工作速度非常快。 但是，只要我开始编辑我的文件，反应显示我警告React attempted to reuse markup 。 当代码改变的时候，hmr做了它的魔术，但是服务器在硬刷新的时候仍然继续发送旧的标记，因为我很难要求一个捆绑文件，比如let SERVER = require("./www/server.bundle").default; 也许webpack-dev-server处理这个问题，但是如何用一个webpackconfiguration数组来设置呢？

我想hot.js也是一个块，但是它调用require('./build/webpack/prod.js')来调用require('webpack')很多，使得webpack生气，而不是编译任何东西。

Answer 1

您可能会对webpack-hot-server-middleware感兴趣，这是为了解决这个问题而devise的。

所有你需要做的是用webpack-hot-server-middlewarereplace硬编码require('./www/server.bundle').default

 const app = require("express")(); const compiler = require('webpack')(require('./build/webpack/prod.js')); app.use(require('webpack-dev-middleware')(compiler); app.use(require('webpack-hot-middleware')(compiler.compilers.find(compiler => compiler.name === 'client'))); app.use(require("morgan")('combined')); app.use(require('webpack-hot-server-middleware')(compiler, { chunkName: 'server' }); app.listen(3000); 

Webpack热服务器中间件然后将确保每个请求被传递到server.bundle.js最新编译，所以您不再需要在开发过程中重新启动您的服务器。

此外，它具有与客户端软件包共享相同的Webpackcaching以获得更快的构build的额外好处。