During this project development, the /dist folder will become quite cluttered. Good practice involves good organization, and this involves cleaning the /dist folder before each build. There is a clean-webpack-plugin plugin that can be used to do this for you, as follows:

1. Start by installing the clean-webpack-plugin. The following example shows you how to do this:

npm install --save-dev clean-webpack-plugin

Once the plugin is installed, we can delve back into the configuration file.

2. Using webpack.config.js, make the following entry in the file:

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

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

Note the use of CleanWebpackPlugin, proceeding with the const qualifier. This will be the addition of the module.export plugin option, which creates a new function associated with the plugin and will make the plugin usable by Webpack during compilation.

3. You should now run an npm build, which will output a bundle to the/dist distribution folder.

After you run a npm build, the /dist folder can be inspected. You should only see newly generated files and no more old ones, assuming the process behaved correctly.

We've been generating a lot of files, and to help us keep track, there is something called the manifest, which we will cover next.