3
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

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をした後に
スクリーンショット 2020-11-11 22.46.22.png

npm run buildを実行すると
スクリーンショット 2020-11-11 22.47.09.png

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

3
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?