Webpack2 Hot模塊重新加載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發揮了魔力，但是服務器即使進行了硬刷新也仍會發送舊的標記，因為我很難要求使用bundle文件，例如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中間件將確保將每個請求傳遞給server.bundle.js最新編譯，因此您無需在開發過程中重新啟動服務器。

此外，它還具有與客戶端捆綁共享相同的Webpack緩存的優勢，以加快構建速度。