「clean-webpack-plugin」の記事 - Crieit

【JS/Webpack】ビルドしたフォルダの不要ファイルを削除する

2022-08-24T23:45:46+09:00

こんにちは、しきゆらです。今回は、Webpackでビルドしたものが出力されるフォルダにできる不要ファイルを削除する方法を知ったのでメモしておきます。

WebpackでJSのコードをビルドしていると、結構な頻度で不要なファイルができたりします。例えば、デバッグ用に生成したソースマップファイルがそのまま残っていたり、過去に設定を変えてあるところから出力しなくなったファイルが残っていたり等、ビルド先のdistフォルダの中はごちゃごちゃしがちです。これを何とかしたいなぁ、と思って調べたら簡単に解決できました。

Webpackでこういうことできないかなぁと調べると大抵プラグインが出てきて追加しないといけないことが多く、今回もそのパターンでよくわからないものを追加しないといけないのかなぁ・・・と思っていたのですが、どうも標準機能として用意されているようでした。ということで結論。

結論: outputの中に[clean: true]を追加すればよい

ドキュメントを読むことは大事ですね。しっかり記載がありました。

https://webpack.js.org/guides/output-management/#cleaning-up-the-dist-folder

こちらによると、ビルドしたものを置くdistフォルダの中身をビルドのたびにきれいにしたい場合はoutput.cleanオプションを使え、とあります。ただし、この方法が使えるのはWebpack5以降のみなので注意してください。

// webpack.config.jsの一部分
~~~~~~
output: {
   filename: "output.js",
   path: path.resolve(__dirname, "dist"),
   clean: true // この1行を追加すればよい
}

はい、たったこれだけ。１行追加するだけで、ビルドのたびにdistフォルダの中身をきれいにしてくれるので、過去にビルドした残骸が残ることはなくなりました。

また、こちらのページには細かい設定方法もありました。

https://v4.webpack.js.org/guides/output-management/#cleaning-up-the-dist-folder

そして、前述の通りこの方法が使えるのはWebpack5以降のみとのことでした。Webpack4などを使っている方は、プラグインでの対応となるようです。

Webpack4を使っている方: clean-webpack-pluginを使う

https://v4.webpack.js.org/guides/output-management/#cleaning-up-the-dist-folder

Webpack4版のドキュメントを見ると、同様の項目ですが対応方法が異なっていました。「clean-webpack-plugin」というプラグインを使えば削除できるので、導入・設定しましょうとのことでした。以下にドキュメントにあったサンプルを載せておきます。

# プラグインのインストール
npm install --save-dev clean-webpack-plugin

webpack.config.jsはこんな感じ。

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// プラグインを読み込む
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  entry: {
    app: './src/index.js',
    print: './src/print.js',
  },
  plugins: [
    new CleanWebpackPlugin(), // この行を追加する
    new HtmlWebpackPlugin({
      title: 'Output Management',
    }),
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

これにより、output.pathで指定したフォルダにある不要ファイルを削除したうえでビルドしてくれるとのことでした。さらに、Webpack5では細かい設定ができましたが、clean-webpack-pluginでも似たような設定はできそうです。

https://www.npmjs.com/package/clean-webpack-plugin

まとめ

今回は、Webpackで過去にビルドした残骸をきれいに削除する方法をまとめました。不必要なプラグインを導入せずに、たった１行の設定追加だけでやりたかったことが実現できてとてもハッピーです。

そして、Webpack5ではデフォルトでこの機能が入っていることを知りませんでした。過去に調べたときはプラグイン対応だったよなぁと思いつつ調べると、やはりプラグインを導入しろ、という記事が多く出てきました。とりあえずググるのは大事ですが、ドキュメントをさっくりと眺めておく、というのも必要ですね。

Webpack の clean-webpack-plugin のメモ

2021-01-21T00:22:56+09:00

よんどころなき事情により Webpack で clean-webpack-plugin を使おうとしたのですが、過去の記事を見ていたら嵌まったのでメモしておきます。

経緯

処理中のフラグによって .js ファイルを複数出力(数はフラグにより増減)しようとしたのですが、減らすときは当然 output 先 (ここでは dist/js )は前の出力結果が残ってしまっているので、余計なゴミとして残ってしまうことに気付きました。

そこで Webpack のビルド直前に output 先をクリーニングしようと考え、検索すると clean-webpack-plugin がヒットしたので、これを試そうとしました。

なお、パッケージの指定は以下の通りです。

    "devDependencies": {
        "webpack": "^5.15.0",
        "webpack-stream": "^6.1.1",
        "terser-webpack-plugin": "^5.1.1",
        "clean-webpack-plugin": "^3.0.0"
    },
    "resolutions": {
        "webpack": "^5.15.0"
    },

Gulp から webpack-stream 経由で Webpack を使用、という状況です。

現象

clean-webpack-plugin の使い方の記事を見ると、 webpack.config.js に以下のように書くケースが散見されました。

const webpackTerser          = require('terser-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // require
const path                   = require('path');
const glob                   = require('glob');

const entry = () => {
    const entries = glob
        .sync(
            '**/*.js',
            {
                cwd: 'src/js',
                ignore: [
                    '**/_*.js'
                ]
            }
        )
        .map(function (key) {
            return [key, path.resolve('src/js', key)];
        });
    return Object.fromEntries(entries);
};
const configs = {
    mode: 'development',
    entry: entry(),
    output: {
        filename: '[name]',
    },
    devtool: 'inline-source-map',
    plugins: [
        // plugin
        new CleanWebpackPlugin([
            'dist/js' // cleanup path
        ]),
    ],
    optimization: {
            minimizer: [
            new webpackTerser({
                extractComments: 'some',
                terserOptions: {
                    compress: {
                        drop_console: false,
                    },
                },
            }),
        ],
    },
};

module.exports = configs;

今回引っかかったのは CleanWebpackPlugin インスタンスへの引数で「クリーニングしたいディレクトリのパスの配列」を指定する部分。

Error: clean-webpack-plugin only accepts an options object. See:
            https://github.com/johnagan/clean-webpack-plugin#options-and-defaults-optiona

clean-webpack-plugin の引数はオブジェクトの形式ですって？

散見される記事は配列でした。

上記エラー文の通り、 Github を参照すると……確かにオブジェクトの形式で指定されています。

これ以上は突っ込んでいませんが、どうやらどこかのバージョン (今回インストールした clean-webpack-plugin は 3.0.0 だったので、2系と3系で乖離があるのかもしれません) で仕様が変わったのかもしれません。

これを受けて以下のように修正。

const webpackTerser = require('terser-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // require
const path          = require('path');
const glob          = require('glob');

const entry = () => {
    const entries = glob
        .sync(
            '**/*.js',
            {
                cwd: 'src/js',
                ignore: [
                    '**/_*.js'
                ]
            }
        )
        .map(function (key) {
            return [key, path.resolve('src/js', key)];
        });
    return Object.fromEntries(entries);
};
const configs = {
    mode: 'development',
    entry: entry(),
    output: {
        filename: '[name]',
    },
    devtool: 'inline-source-map',
    plugins: [
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: [
                'dist/js/**/*.js' // cleanOnceBeforeBuildPatterns キーの中に配列指定。また、ディレクトリパスの指定ではなく、 glob での指定
            ],
        }),
    ],
    optimization: {
            minimizer: [
            new webpackTerser({
                extractComments: 'some',
                terserOptions: {
                    compress: {
                        drop_console: false,
                    },
                },
            }),
        ],
    },
};

module.exports = configs;

変更点は以下の2つ。

指定そのものを cleanOnceBeforeBuildPatterns キーに対する値として配列を記述するようにしたこと
ディレクトリパスではなく glob 指定ということ (拡張子指定が不要な場合は dist/js/**/* というような形)

これで意図した挙動になりました。

余談

最初とりあえず試すだけ試そうとして

    plugins: [
        new CleanWebpackPlugin(),
    ],

途中試験のため cwd も抜いていたせいで、引数なしで CleanWebpackPlugin インスタンスを起こしたところ、プロジェクトルートからファイルを削除しようとして焦りました (デフォルトが dry: false(テストなし), verbose: false(削除するファイルをコンソールに出力しない), cleanOnceBeforeBuildPatterns: ['**/*'](ルートからの全てのファイル) という指定だったため)。

うっかり走らせないこと。

参考

(余談) エントリーポイントの ignore 指定

webpackのentryファイルを複数指定、globパッケージの使い方 - Qiita