Горячий модуль Webpack2 Перезарядка Express.js Универсальный Реагировать 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 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, который был разработан для решения этой проблемы.

Все, что вам нужно сделать, это заменить hardcoded 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 сервер Middleware будет убедиться, что каждый запрос передается на самом последнюю компиляцию server.bundle.js поэтому вам больше не придется перезагрузить сервер в процессе разработки.

Кроме того, он обладает дополнительным преимуществом совместного использования одного и того же кэша Webpack в качестве клиентского пакета для более быстрой сборки.