こんにちは、しきゆらです。
今回は、Webpackでビルドしたものが出力されるフォルダにできる不要ファイルを削除する方法を知ったのでメモしておきます。
WebpackでJSのコードをビルドしていると、結構な頻度で不要なファイルができたりします。
例えば、デバッグ用に生成したソースマップファイルがそのまま残っていたり、過去に設定を変えてあるところから出力しなくなったファイルが残っていたり等、ビルド先のdist
フォルダの中はごちゃごちゃしがちです。
これを何とかしたいなぁ、と思って調べたら簡単に解決できました。
Webpackでこういうことできないかなぁと調べると大抵プラグインが出てきて追加しないといけないことが多く、今回もそのパターンでよくわからないものを追加しないといけないのかなぁ・・・と思っていたのですが、どうも標準機能として用意されているようでした。
ということで結論。
結論: outputの中にclean: true
を追加すればよい
ドキュメントを読むことは大事ですね。
しっかり記載がありました。
こちらによると、ビルドしたものを置くdist
フォルダの中身をビルドのたびにきれいにしたい場合はoutput.clean
オプションを使え、とあります。
ただし、この方法が使えるのはWebpack5以降のみなので注意してください。
// webpack.config.jsの一部分
~~~~~~
output: {
filename: "output.js",
path: path.resolve(__dirname, "dist"),
clean: true // この1行を追加すればよい
}
はい、たったこれだけ。
1行追加するだけで、ビルドのたびにdist
フォルダの中身をきれいにしてくれるので、過去にビルドした残骸が残ることはなくなりました。