Webpack2 using plug-in Clean-webpack-plugin to clear duplicate files in Dist folder

The configuration file is as follows

/** * Created by Oufeng on 2017/5/6.*/Const Webpack= Require (' Webpack '); Const path= Require (' path '); Const Extracttextplugin= Require (' Extract-text-webpack-plugin ');Module.exports={entry: {main:'./app/index.js ', Vendor: [' Moment ']}, Output: {filename:' [name]. [Chunkhash].js ', Path:path.resolve (__dirname,' Dist ')}, module:{rules:[{test:/\.css$/, Use:ExtractTextPlugin.extract ({use:' Css-loader '})}, {test:/.woff|. woff2|. Svg|. Eot|. ttf/, use:' url-loader?prefix=font/&limit=10000 '}]}, plugins: [NewExtracttextplugin (' Styles.css '),        NewWebpack.optimize.CommonsChunkPlugin ({name:' Vendor ', Minchunks:function(module) {//This configuration assumes that the bootstrap you have introduced exists in the Node_modules directory                returnModule.context && module.context.indexOf (' node_modules ')!==-1; }        }),        //To avoid a change in the hash value of the vendor.*.js, you need to output a manifest.*.js file        NewWebpack.optimize.CommonsChunkPlugin ({name:' Manifest '//But since there is no more common modules between them we end up with just the runtime code included in the manifest File        })    ]};

The first time you run NPM Run build (webpack)

The folder for Dist is this:

Modify the "./app/index.js" content for the second time to run NPM run build

The Dist folder is like this: both Main.*.js and manifest.*.js have been repeatedly added once.

Modify the "./app/index.js" content for the third time to run NPM run build

The Dist folder is like this: Main.*.js and manifest.*.js have been added again.

Came here to say that the landlord is very silent Ah, I run build can be before the main.*.js and Manifest.*.js are deleted once, only keep the public vendor.*.js file is good.

So using Googel Dafa, found that there is a plug-in called Clean-webpack-plugin can meet my needs, but also easy to use.

// Installing plugins

// Introducing the plugin const Cleanwebpackplugin = require (' Clean-webpack-plugin ');

//Add Cleanwebpackplugin plugin in Webpack.config.js/** * Created by Oufeng on 2017/5/6.*/Const Webpack= Require (' Webpack '); Const path= Require (' path '); Const Extracttextplugin= Require (' Extract-text-webpack-plugin '); Const Cleanwebpackplugin= Require (' Clean-webpack-plugin '); Module.exports={entry: {main:'./app/index.js ', Vendor: [' Moment ']}, Output: {filename:' [name]. [Chunkhash].js ', Path:path.resolve (__dirname,' Dist ')}, module:{rules:[{test:/\.css$/, Use:ExtractTextPlugin.extract ({use:' Css-loader '})}, {test:/.woff|. woff2|. Svg|. Eot|. ttf/, use:' url-loader?prefix=font/&limit=10000 '}]}, plugins: [NewExtracttextplugin (' Styles.css '),        NewWebpack.optimize.CommonsChunkPlugin ({name:' Vendor ', Minchunks:function(module) {//This configuration assumes that the bootstrap you have introduced exists in the Node_modules directory                returnModule.context && module.context.indexOf (' node_modules ')!==-1; }        }),        //To avoid a change in the hash value of the vendor.*.js, you need to output a manifest.*.js file        NewWebpack.optimize.CommonsChunkPlugin ({name:' Manifest '//But since there is no more common modules between them we end up with just the runtime code included in the manifest File        }),        NewCleanwebpackplugin ([' Dist/main.*.js ', ' dist/manifest.*.js ',],//Match deleted file {root: __dirname,//root directoryVerbosetrue,//turn on console output informationDryfalse         　　　　　　　　　　 //Enable Delete files            }        )    ]};

After such a configuration, no matter how many times the NPM run build is executed, the Dist directory looks like this.

Webpack2 using plug-in Clean-webpack-plugin to clear duplicate files in Dist folder