SSRとCode Splittingとwebpack-dev-middlewareのwriteToDisk
-
SSR と Code Splitting を行うとき、分割されたファイル情報が必要になることがあります。
そんなときは webpack-dev-middleware
を使っていれば、オプション writeToDisk
で解決できるというお話です。
こんな感じで writeToDisk
を有効にすると、webpack の publicPath にファイルが出力されます。hot reload を使っている開発環境などで役に立ちます。
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const { default: webpackConfig } = require('../webpack.config');
const compiler = webpack(webpackConfig);
app.use(
webpackDevMiddleware(compiler, {
writeToDisk: true // これ
})
);
関数を指定することもできるので、Array.filter のように出力するファイルを制限することも可能です。
app.use(
webpackDevMiddleware(compiler, {
writeToDisk: (filePath) => {
return /superman\.css$/.test(filePath);
}
})
);
余談
ちなみに Next.js (v7.0.2-canary.38) では以下のような設定が行われていました。
writeToDisk: true