create-react-appで生成した環境でejectせずにWebpackのプラグインを試したい

はじめに

create-react-app、使ってますか？ 便利ですよね〜。

create-react-app (react-scripts) はWebpackやBabelなどの設定をうまく隠蔽しています。どういう設定をしたら何が起こるのか、を気にせずにコードを書ける体験は良いのですが、生きてるとどうしても凝ったことをしたくなる瞬間が来ます。

真面目にツールチェインに向き合う覚悟を持って yarn eject すれば全てを得ることができますが、そこまでせずにちょっとプラグインを試してみたい、ぐらいのときにejectするのはあまりに代償が大きいです。どうにかできないのか……。

cra-bundle-analyzerの例

ここでcra-bundle-analyzerというツールの存在を思い出します。これは、create-react-appで生成した環境でwebpack-bundle-analyzerを動かすことができるツールです。

このツールを使うためにejectする必要はありません。つまり、このツールがやっていることを真似すればejectせずに任意のWebpackプラグインを試せそうです。実装を見てみましょう。

github.com

やっていることは思ったよりもシンプルでした。create-react-app (react-scripts) が持っているWebpackの設定を読み込んで、そこにwebpack-bundle-analyzerのプラグインを注入してビルドしています。

他のプラグインでやってみる

やり方は分かったので、webpack-license-pluginでやってみましょう。以下のようなスクリプトを用意します。

const webpack = require("webpack");
const LicensePlugin = require("webpack-license-plugin");
const webpackConfig = require("react-scripts/config/webpack.config");

process.env.NODE_ENV = "production";

const main = async () => {
    const config = webpackConfig("production");
    config.plugins.push(new LicensePlugin());

    const compiler = webpack(config);
    await new Promise((resolve, reject) => {
        compiler.run((err) => {
            if (err) {
                reject(err);
            }

            resolve();
        });
    });
};

main();

これでoss-licenses.jsonファイルを生成することができました。よかったですね。

おわりに

ejectせずに、Webpackのプラグインをインストールしてスクリプトを書くことで、create-react-appの環境内でWebpackのプラグインを試すことができました。ビルドツールチェーンに大きく手を入れずにプラグインを動かしてみたい、というときに便利に使えそうです。

この手法は id:cockscomb さんに教えてもらったアイデアに着想を得ました。