【webpack】ビルド前にrimrafで出力先ディレクトリをキレイにする

2118 ワード
JavaScript webpack JavaScript テキストリンク

webpackでビルドされるファイルを管理する上で、
出力先のディレクトリを一旦キレイにしてからビルドする方法を学んだので備忘録。

結論、rimrafをnpmでインストールしてUNIXコマンド rm -rfを使えるようにします。

導入

npmもしくはyarnでパッケージをインストールします。

npm add rimraf --dev

参考：rimraf - npm

実践的な使い方

開発と本番でビルドの設定を変えるのが一般的かと思いますので、
package.jsonでscriptsコマンドを定義するとこんな感じかなと思います。

package.json
"scripts": {
    "cleanup": "npx rimraf ./public", // public配下をキレイにします
    "dev": "npm run cleanup && npx webpack --config ./webpack.dev.js",
    "build": "npm run cleanup && npx webpack --config ./webpack.prod.js"
  },

npm run devをした後に

npm run buildを実行すると

初期化されたpublicに新しいチャンクが生成されていますね。