常用插件

clean-webpack-plugin

清空dist文件
在webpack5中在output设置 clear：true开启
在生成文件之前清空 output 目录

output.clean5.20+

module.exports = {
  //...
  output: {
    clean: true, // 在生成文件之前清空 output 目录
  },
};

打印而不是删除应该移除的静态资源

module.exports = {
  //...
  output: {
    clean: {
      dry: true, // 打印而不是删除应该移除的静态资源
    },
  },
};

保留 ‘ignored/dir’ 下的静态资源

module.exports = {
  //...
  output: {
    clean: {
      keep: /ignored\/dir\//, // 保留 'ignored/dir' 下的静态资源
    },
  },
};

html-webpack-plugin

生成htm 模板

const htmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
    new htmlWebpackPlugin({
      template: './public/index.html',
      title: 'webpack-demo',
      cdn,
  ],

可以再html中配置ejs语法去除插件内的options,可以用来部署cdn

<title>
   <%= htmlWebpackPlugin.options.title %>
</title>

DefinePlugin（webpack 内置）

可以替换文件中出现的语句
注意，需要替换字符串需要 "" 包裹

const { DefinePlugin } = require('webpack')
plugins: [
    new DefinePlugin({
      BASE_URL: '"./"'
    }),
  ]

相似插件

EnvironmentPlugin

new webpack.EnvironmentPlugin(['NODE_ENV', 'DEBUG'])
// 这相当于下面的 DefinePlugin 应用程序
new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
  'process.env.DEBUG': JSON.stringify(process.env.DEBUG),
});

dotenv-webpack

能够读取.env文件内的属性，覆盖在process.env上

// .env
DB_HOST=127.0.0.1
DB_PASS=foobar
S3_API=mysecretkey

const Dotenv = require('dotenv-webpack');
plugins: [
    new Dotenv(),
  ],

copy-webpack-plugin

将文件拷贝入打包文件
省略to文件将会，以output的path为复制的终点

  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'public',
          globOptions: {
            ignore: ['**/index.html']
          }
        }
      ]
  ]