2022-08-24に更新

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

こんにちは、しきゆらです。今回は、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行を追加すればよい
}

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

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

Originally published at shikiyura.com
ツイッターでシェア
みんなに共有、忘れないようにメモ

しきゆら

北の大地に住む大学から関東での社会人へジョブチェンジ。 Ruby/JavaScriptをよく書いている いろんな言語に触れてみたい 新しい物・辛いもの好き バグは愛すべきもの

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント