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

时间:2021-10-25 01:34:03

配置文件如下

/**
* 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的文件夹是这样的:

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

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

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

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

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

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

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

来到这里楼主表示很无语啊,我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的目录都是这个样子的。

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

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