【Webpack】ビルド時にフォルダーを空にする

パッケージのインストール

ビルド時にフォルダーを空にするには「clean-webpack-plugin」を使います。

npm i -D clean-webpack-plugin

Bash

設定ファイル

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    output: {
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new CleanWebpackPlugin()
    ]
}

webpack.config.js

clean-webpack-pluginを使用する場合は、必ずoutput.pathの設定が必要になります。
設定をしていない場合は、webpack実行時に「clean-webpack-plugin: options.output.path not defined. Plugin disabled…」のWarningが表示され無効化されます。