Webpack をカスタマイズする

Docz も中で Webpack を使ってビルドしたりしていますが、自分のコンポーネントが自分の Webpack 設定依存の箇所を持っているとそのままだと Docz が使えなかったりします。

Docz の Webpack 設定を修正する

これには設定ファイルのdoczrc.jsmodifyBundlerConfigという関数を設定してエクスポートします。これは第一引数に Docz の Webpack 設定を渡してくれるので、その設定オブジェクトを自分好みにした後それを返します。

例えば僕の場合webpack.DefinePluginの内容に依存しているということがありました。その時設定ファイルはこのようになりました。

const webpack = require('webpack');

module.exports = {
  title: 'サイトのタイトル',
  modifyBundlerConfig: config => {
    config.plugins.push(new webpack.DefinePlugin({
      '何かプロパティ': JSON.stringify('何か値')
    }))

    return config;
  },
};