通用应用程序的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 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生气了,什么也没编译。

最佳答案

您可能对旨在解决此问题的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 Hot Server中间件将确保将每个请求传递给最新版本的server.bundle.js,这样您就不必在开发过程中重新启动服务器。

此外,它还具有与客户端捆绑共享相同的Webpack缓存的优势,以加快构建速度。

关于node.js - Webpack2 Hot模块重新加载Express.js Universal React App,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41780138/

10-11 09:18
查看更多