使用clean-webpack-plugin插件来清理打包目录

有些时候，我们打包时会带有时间戳，这样频繁地进行打包操作后，输出目录里就会残留很多以前的打包文件，而这些文件对我们来说没有价值，而且会使输出目录非常杂乱。

通常，在每次构建前清理输出目录，是比较推荐的做法，这样就只会生成用到的文件。使用clean-webpack-plugin插件就可以达到这个目的。

首先，我们来安装它，代码如下：

npm install --save-dev clean-webpack-plugin

然后，在webpack.config.js文件的plugins属性中，进行配置操作，代码如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    mode: 'production',         // 模式，默认两种 production和development
    entry: './src/index.js',    // 入口，从哪个文件开始打包
    output: {                   // 出口
        filename: 'bundle.js',  // 打包后的文件名
        path: path.resolve(__dirname, './build')   // 路径必须是一个绝对路径
    },
    devServer: {                // 开发服务器的配置
        port: 3000,             //端口
        progress: true,         // 打包时显示进度条
        contentBase: './build', // 指定目录做为静态服务
        compress: true          // 启用gzip压缩
    },
    module: {
        rules: [{
            test: /\.scss$/,
            use: [
                'style-loader', // 将 JS 字符串生成为 style 节点
                'css-loader',   // 将 CSS 转化成 CommonJS 模块
                "sass-loader"   // 将 Sass 编译成 CSS
            ]
        }]
    },
    plugins: [                  // 数组，放着所有的webpack插件
        new CleanWebpackPlugin({
            cleanAfterEveryBuildPatterns: ['build']
        }),
        new HtmlWebpackPlugin({
            template: './src/index.html',       // 指定要打包的模板
            filename: 'index.html',             // 打包后生成的文件
            minify: {                           // 压缩操作 
                // removeAttributeQuotes: true,    // 删除模板中的双引号
                // collapseWhitespace: true        // 将模板压缩成一行
            },
            // hash: true                          // 模板中引用的js文件带哈希戳
        })
    ]
};