node.js - Webpack2 热模块重新加载 Express.js 通用 React 应用程序

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 block 的输出，如 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 也做成一个 block ，但它调用 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 的最新编译，以便您在开发过程中不再需要重新启动服务器。

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