Webpack2ホットモジュールはユニバーサルアプリのWebPACKのコンフィグが通常のように設定オブジェクトの配列であるアプリケーション

Question

に反応：webpack --config build/webpack/prod.jsを実行した後

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" 
     } 
     ... 
    }]; 

、私はちょうど、生産上の次の操作を行うことができますnode www/express.bundle.jsのようなserver.expressチャンクの出力を実行します。

// 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('webpack')を呼び出すrequire('./build/webpack/prod.js')を呼び出し、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の最新のコンパイルに渡されることを確認します。

さらに、高速のビルドのために、同じWebpackキャッシュをクライアントバンドルと共有するという利点があります。