webpack2利用插件clean-webpack-plugin来清除dist文件夹中重复的文件

Posted 2020-09-17 欧欧欧锋_

配置文件如下

/**
 * 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: [
        new ExtractTextPlugin(\'styles.css\'),
        new webpack.optimize.CommonsChunkPlugin({
            name: \'vendor\',
            minChunks: function (module) {
                // 该配置假定你引入的 bootstrap 存在于 node_modules 目录中
                return module.context && module.context.indexOf(\'node_modules\') !== -1;
            }
        }),
        //为了避免vendor.*.js的hash值发生改变需要输出一个manifest.*.js文件
        new webpack.optimize.CommonsChunkPlugin({
            name: \'manifest\' //But since there are no more common modules between them we end up with just the runtime code included in the manifest file
        })
    ]
};

 

第一次运行  npm run build (webpack)时

dist的文件夹是这样的:

 

第二次 修改一下 "./app/index.js"的内容 再 运行 npm run build 

dist的文件夹是这样的: main.*.js和manifest.*.js都重复增加了一次。

 

 

第三次 修改一下 "./app/index.js"的内容 再 运行 npm run build 

dist的文件夹是这样的: main.*.js和manifest.*.js又重复增加了一次。

 

来到这里楼主表示很无语啊，我run build的时候能不能把 之前的main.*.js和manifest.*.js都删除一次昵，只保留公共的vendor.*.js文件就好啦。

于是使用Googel大法，发现有一个插件叫clean-webpack-plugin可以满足我的需求，而且简单易用。

 

//安装插件
npm install --save-dev clean-webpack-plugin 

 

//引入插件
const CleanWebpackPlugin = require(\'clean-webpack-plugin\');

 

//webpack.config.js中添加CleanWebpackPlugin插件
/**
 * 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: [
        new ExtractTextPlugin(\'styles.css\'),
        new webpack.optimize.CommonsChunkPlugin({
            name: \'vendor\',
            minChunks: function (module) {
                // 该配置假定你引入的 bootstrap 存在于 node_modules 目录中
                return module.context && module.context.indexOf(\'node_modules\') !== -1;
            }
        }),
        //为了避免vendor.*.js的hash值发生改变需要输出一个manifest.*.js文件
        new webpack.optimize.CommonsChunkPlugin({
            name: \'manifest\' //But since there are no more common modules between them we end up with just the runtime code included in the manifest file
        }),
        new CleanWebpackPlugin(
            [\'dist/main.*.js\',\'dist/manifest.*.js\',],　 //匹配删除的文件
            {
                root: __dirname,       　　　　　　　　　　//根目录
                verbose:  true,        　　　　　　　　　　//开启在控制台输出信息
                dry:      false        　　　　　　　　　　//启用删除文件
            }
        )
    ]
};

 

这样的配置之后，无论怎么执行多少次的npm run build 后dist的目录都是这个样子的。