Webpack2 热模块重新加载 Express.js Universal React App

Question

通用应用程序的 webpack 配置通常是一组配置对象，例如：

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 就会向我显示关于 React attempted to reuse markup 的警告。当代码发生变化时，hmr 会发挥它的魔力，但即使进行硬刷新，服务器也会继续发送旧标记，因为我很难需要像 let SERVER = require("./www/server.bundle").default; 这样的捆绑文件，也许 webpack-dev-server 可以处理这个，但我该如何设置它带有一组 webpack 配置？

我也想把 hot.js 做成一个块，但是它调用 require('./build/webpack/prod.js') 调用 require('webpack') 很多，让 webpack 生气并且没有编译任何东西。

Answer 1

您可能对旨在解决这个问题的 webpack-hot-server-middleware 感兴趣。

您只需将硬编码的 require('./www/server.bundle').default 替换为 webpack-hot-server-middleware，例如

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 的最新编译，因此您不再需要在开发过程中重新启动服务器。

此外，它还有一个额外的好处，即与客户端包共享相同的 Webpack 缓存以加快构建速度。

Webpack2 热模块重新加载 Express.js Universal React App

Webpack2 Hot Module Reloading a Express.js Universal React App

node.js

express

reactjs

webpack

webpack-2