SSRとCode Splittingとwebpack-dev-middlewareのwriteToDisk

2018.12.05-2019.03.19

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

参考

webpack-dev-middleware