zoukankan      html  css  js  c++  java
  • 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

    开发工具
  • 相关阅读:
    java 之 模板模式(大话设计模式)
    java 之 原型模式(大话设计模式)
    java 之 工厂模式(大话设计模式)
    java 之 代理模式(大话设计模式)
    java 之 装饰模式(大话设计模式)
    java 之 策略模式(大话设计模式)
    java 之 简单工厂模式(大话设计模式)
    SVNKit完成前台Tree列表
    eclipse导出jar(含依赖)三步走
    简化SSM搭建详细分析配置
  • 原文地址:https://www.cnblogs.com/cisbest/p/13780732.html
Copyright © 2011-2022 走看看