webpack2利用插件clean-webpack-plugin來清除dist文件夾中重復的文件

配置文件如下

/**
 * 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的目錄都是這個樣子的。