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后，我可以在生产中执行以下操作，只需像node www/express.bundle.js那样运行server.express chunk的输出。

//  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 Hot Server Middleware将确保将每个请求传递给最新的server.bundle.js编译，这样您就不必再在开发过程中重新启动服务器了。

此外，它还具有与客户端捆绑包共享相同Webpack缓存以获得更快构建的额外好处。

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

1 个答案: