cracoでwebpackの設定をオーバーライドする

hubarifront.hatenablog.com

前回の記事の続きです。
前回はcraco自体のプラグインを使って、グローバルにmixinを定義する方法などをご紹介しましたが、今回はwebpackの設定のオーバーライドについて。

cracoは「creat-react-app」の設定をいじれるライブラリで、create-react-appではwebpackが使われています。

さて、どんなconfigが使われているのかみてみましょう！...といきたいところなのですがコード量多いので、気になる方は「node_modules/react-scripts/config/webpack.config.js」を見てみてください。

では、実際にオーバーライドしてみたcraco.config.jsを見てみます。

const sassResourcesLoader = require('craco-sass-resources-loader');
const TerserPlugin = require('terser-webpack-plugin');
const path = require("path");


module.exports = {
    mode: process.env.REACT_APP_ENVIROMENT,
    output: {
        path: __dirname
    }
    webpack: {
        alias: {
            "@": path.resolve(__dirname, "src"),
        },
        configure: {
            optimization: {
                minimize: true,
                minimizer: [
                    new TerserPlugin({
                        terserOptions: {
                            ecma: undefined,
                            parse: {},
                            compress: {},
                            mangle: true,
                            module: false,
                        },
                    }),
                ],
            },
        },
    },
    // craco plugin setting
    plugins: [
        {
            plugin: sassResourcesLoader,
            options: {
                resources: './src/css/style.scss',
            },
        },
    ]
};

見てもらうとわかりますが、「webpack」というkeyがありますよね。
ここにもろもろ入れるとwebpackの設定をオーバーライドすることができます。

今回は、aliasの設定とTerserの設定を変えてみました。

まんまwebpack.config.jsをwebpackのキーの中に入れるだけだと思っていいです。

aliasを設定すると、いちいち相対パスで遡る必要がなくなるので便利ですよね。

ただ、今回ちょっと詰まったのはTerserのバージョンです。

create-react-appの内部では、Terserのバージョンが4系だったのに対し、最初私は5系の最新を入れてしまったためビルドエラーとなりました。
create-react-appで使用されているライブラリをオーバーライドする際には、しっかりバージョンを合わせる必要がありそうです。

とにかく、割と簡単にオーバーライドできるので、webpackをいちいち設定するよりはcracoを使ってプロジェクトに合わせて設定をオーバーライドしていくのは、スマートな気がしました。