エクスプレスでWebpackの設定

Question

私は初心者の質問があります。私はこれを読んでいますtutorial：

app.use部分は、表現とwebpackを使用しています。すなわちwebpack-dev-middlewareとwebpack-hot-middlewareです。私の質問は、これらの2つの設定をwebpack.config.jsに入れてserver.jsに入れることです。 webpack.config.jsに戻すことができれば、なぜここに置くのですか？あなたが指定する設定を行う場所server.jsで

は

const port = 3000; 
const app = express(); 
const compiler = webpack(config); 

app.use(require('webpack-dev-middleware')(compiler, { 
    noInfo: true, 
    publicPath: config.output.publicPath 
})); 

app.use(require('webpack-hot-middleware')(compiler)); 

Answer 1

WebPACKの設定ファイルは次のとおりです。

• はどのようにWebPACKのあなたのコードをバンドルし、それがコード
で利用可能にするものなプラグイン
• 静的資産の処理に使用するプリプロセッサー
• エントリと出力を定義するポイント

フレームワーク（Express）がいくつかのプラグインをどのように使用するかを指定することはできません。では、あなたがリンクしているblog、設定ファイルは、この部分が含まれています

ここ

plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin() 
], 

、あなたはwebpack.HotModuleReplacementPluginを使用するために、アプリケーションで利用可能になるように指定されています。それはどのようにそれが使用される指定していません。さらに、webpack-dev-middlewareはconfigに含まれていないことに注意してください。

具体的には、フレームワークがwebpack-dev-middlewareを使用するはずであることをExpressに伝える必要があります。そのため、server.jsファイルにapp.use(require('webpack-dev-middleware')..と記述する必要があります。 webpack-hot-middlewareについても同様です。