how to config the webpack 5.x to remove the dist folder before build

Question

Before the next build, I want to remove the previous build because if we do not remove the old build, some change that did not generate the output file may not be found as soon as possible. I am tried to do this work using this command in the package.json right now:

"dev": "rm -rf src/bundle && webpack --mode development --config build/webpack.dev.config.js",

but I feel this way may be a little dangerous with the rm -rf command, any better suggetion?

Answer 1

Check out the docs: https://webpack.js.org/guides/output-management/#cleaning-up-the-dist-folder

Add clean:true

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    index: './src/index.js',
    print: './src/print.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Output Management',
    }),
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },
};