Webpack5でよく使うプラグイン紹介

13050 ワード

はじめに

バンドルを最適にしたい場合はどうすればよいのでしょうか?
それは、プラグインを活用することです。

プラグインは、バンドル自体の作成方法を変更するのに役立ちます。

例えば、uglifyjs-webpack-pluginは バンドルされたJavascriptファイルを minify (圧縮) して、バンドルサイズを最小に抑えてくれます。
プラグインは、pluginsプロパティを追加することで、設定を追加してくれるのです。

圧縮と軽量化

ファイルを minify することで、ファイルのバンドルサイズが軽量化や通信も削減されます。
圧縮方法は明快で、terser-webpack-plugin を使用します。(webpack5ではビルトインされています。)

example
import TerserPlugin from 'terser-webpack-plugin';

const config: webpack.Configuration = { 
    ...
    optimization: {
        minimizer: [
            new TerserPlugin({
                // 並列処理の実行を有効化
                // 同時に実行するを数値を設定
                parallel: 4,
                // swcを有効化
                // minify: TerserPlugin.swcMinify,
                // Minify Optionsを設定
                terserOptions: {
                    // 最適化
                    compress: {
                        ecma: 5,
                        warnings: false,
                        comparisons: false,
                        inline: 2,
                    },
                    // 変数名を短く
                    mangle: {
                        safari10: true,
                    },
                },
            }),
        ],
    },
    ...
};

設定の詳細はこちら