Clean Distribution Folder In Each Webpack Build

Webpack creates bundle file and store it in a distribution folder. The default distribution folder is /dist folder. If each bundle is created with different file names, the distribution folder will be crowded with previous version of bundle files.

Here is a webpack configuration that creates output file with the hash value.

module.exports = {
  output: {
    filename: "[contenthash].js",
  },
};

Above configuration, first generates a hash value of the source content. Then the hash value is given as the output bundle file name. This technique is helpful with respect to caching because the output filename changes only when source changes.

But, the problem is that, for each content change, the output /dist folder is filling up.

We can avoid this crowding by adding clean attribute to output configuration.

module.exports = {
  output: {
    filename: "[contenthash].js",
    clean: true,  },
};

Now, after each build, only the generated bundle files will be there in the dist folder.