html-webpack-plugin

htmlwebpackplugin会在打包结束后，⾃动⽣成⼀个html⽂件，并把打包⽣成的js模块引⼊到该html中。

 plugins: [
  new htmlWebpackPlugin({
    title: "My App",
    filename: "app.html",
    template: "./src/index.html"
  })
 ] ;

clean-webpack-plugin

避免构建前每次都需要⼿动删除 dist , 默认会删除 output 指定的输出⽬录

plugins: [
  new CleanWebpackPlugin()
]

mini-css-extract-plugin

webpack.config.js 配置

const { CleanWebpackPlugin } = require("clean webpack-plugin");
module: {
    rules: [
        {
            test: /\.css$/,
            use : [
                MiniCssExtractPlugin.loader,
                { loader: "css-loader" }
            ]
        },
        {
            test: /\.less$/,
            use : [
                MiniCssExtractPlugin.loader,
                { loader: "css-loader" },
                { loader: "less-loader" }
            ]
        }
    ]
},
————————————————
plugins: [
    new MiniCssExtractPlugin({
        filename: "css/common.css"
    }),
]

copy-webpack-plugin

在我们的项目中一般还有一些不需要参与构建的静态文件，那它们最终也需要发布到线上，例如网站的 favicon、robots.txt 等。
一般我们建议，把这类文件统一放在项目根目录下的 public 或者 static 目录中，我们希望 Webpack 在打包时一并将这个目录下所有的文件复制到输出目录。

    new CopyWebpackPlugin({
      patterns: ['public'] // 需要拷贝的目录或者路径通配符
    })

这个插件类型的构造函数需要我们传入一个字符串数组，用于指定需要拷贝的文件路径。它可以是一个通配符，也可以是一个目录或者文件的相对路径。我们这里传入的是 public 目录，表示将这个目录下所有文件全部拷贝到输出目录中。