首页 > 代码库 > webpack2利用插件clean-webpack-plugin来清除dist文件夹中重复的文件

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

2024-09-20 01:13:23   221人阅读

配置文件如下

/**
 * 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 imstall --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的目录都是这个样子的。

技术分享

 

技术分享

 

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


联系
我们