※项目使用前文webpack管理输出建立的项目
截止目前,文件构建过程中过去的指南和代码示例遗留下来,导致我们的 /dist 文件夹相当杂乱。webpack 会生成文件,然后将这些文件放置在 /dist 文件夹中,但是 webpack 无法追踪到哪些文件是实际在项目中用到的。通常,在每次构建前清理 /dist 文件夹,是比较推荐的做法,因此只会生成用到的文件。
clean-webpack-plugin 是一个比较普及的管理插件,让我们安装和配置下。
1、安装清理插件
npm install clean-webpack-plugin
2、修改webpack.config.js文件,将插件加入构建配置文件中
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: '输出管理'
})
]
}
3、dist里随便新建一个临时文件,运行构建命令查看效果
npm run build