webpack4从0开始构建前端单页项目(15)用clean-webpack-plugin清理构建前的目录(dist)

clean-webpack-plugin 这个插件用来清空打包后的 dist 目录下的文件。可以避免每次打包前手动删除构建目录(dist)下的文件。

安装 clean-webpack-plugin

    cnpm i clean-webpack-plugin -D

依赖的模块(package.json)

    "devDependencies": {
        "@babel/core": "^7.11.6",
        "@babel/preset-env": "^7.11.5",
        "babel-loader": "^8.1.0",
        "clean-webpack-plugin": "^3.0.0",
        "css-loader": "^4.3.0",
        "css-minimizer-webpack-plugin": "^1.1.5",
        "html-webpack-plugin": "^4.5.0",
        "mini-css-extract-plugin": "^0.11.3",
        "postcss-loader": "^4.0.3",
        "webpack": "^4.44.2",
        "webpack-cli": "^3.3.12",
        "webpack-dev-server": "^3.11.0"
    },

配置 css-minimizer-webpack-plugin

\ webpack.config.js
    const webpack = require("webpack");
    const path = require("path");
    const htmlWebpackPlugin = require("html-webpack-plugin");
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    const { CleanWebpackPlugin } = require("clean-webpack-plugin");

    module.exports = {
        entry: "./src/main.js",
        mode: "development",
        output: {
            path: path.join(__dirname, "dist"),
            filename: "app.[hash:16].js",
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: "[name].css",
                ignoreOrder: false,
            }),
            new htmlWebpackPlugin({
                filename: "index.html",
                template: "./public/index.html",
                minify: {
                    collapseWhitespace: true,
                    html5: true,
                    preserveLineBreaks: false,
                    minifyCSS: true,
                    minifyJS: true,
                    removeComments: false,
                },
                inject: true,
            }),
            new CleanWebpackPlugin(), // 使用 CleanWebpackPlugin
        ],
        devServer: {
            contentBase: path.join(__dirname, "dist"),
            compress: true,
            port: 9000, // 配置端口
            hot: true,
        },

        module: {
            rules: [
                {
                    test: /.js$/,
                    exclude: /(node_modules|bower_components)/,
                    use: "babel-loader",
                },
                {
                    test: /.css$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        "css-loader",
                        "postcss-loader",
                    ],
                },
            ],
        },
    };

一定要使用 const { CleanWebpackPlugin } = require("clean-webpack-plugin"); 看了下源码，-----

clean-webpack-plugin 参考: https://github.com/johnagan/clean-webpack-plugin