Webpack 5内置插件（除Terser外）有哪些？如何移除输出包中的console？

一、除 TerserPlugin 外的 Webpack 5 内置插件 #

Webpack 5 自带不少无需额外安装的内置插件，常用的有这些：

• DefinePlugin：注入全局常量，比如代码里直接使用的process.env.NODE_ENV就是靠它实现的
• ProvidePlugin：自动加载指定模块，不用每次手动import，比如想让$全局可用，可配置它自动引入jQuery
• HotModuleReplacementPlugin：实现热模块替换（HMR），开发时修改代码无需刷新整个页面
• ProgressPlugin：在终端显示打包进度，方便实时了解打包状态
• IgnorePlugin：忽略特定模块的导入，比如不想打包某些依赖的本地化文件
• ModuleFederationPlugin：Webpack 5 新增的核心内置插件，用于实现模块联邦，支持不同应用间共享代码
• BannerPlugin：给打包输出的文件添加自定义头部注释，比如版权声明信息

二、移除打包文件中的 console 语句 #

有两种常用实现方案：

方案1：通过 TerserPlugin 配置（推荐，生产模式默认支持） #

Webpack 5 在生产模式下默认启用 TerserPlugin 做代码压缩，只需在配置里开启drop_console即可：

// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // ...其他配置项
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true, // 移除所有console语句
            // 若需保留console.error，可改为：drop_console: true, pure_funcs: ['console.log', 'console.info']
          },
        },
      }),
    ],
  },
};

如果是生产模式（mode: 'production'），也可以不用手动实例化 TerserPlugin，直接修改optimization.minimizer里的默认配置。

方案2：使用 Babel 插件 #

先安装babel-plugin-transform-remove-console插件：

npm install babel-plugin-transform-remove-console --save-dev

再修改babel.config.js或.babelrc配置文件：

// babel.config.js
module.exports = {
  // ...其他配置项
  plugins: [
    // 仅在生产环境移除console语句
    process.env.NODE_ENV === 'production' && 'transform-remove-console',
  ].filter(Boolean),
};

这种方案适合需要在编译阶段就移除console的场景，若开发模式也想移除，去掉环境判断即可。

内容的提问来源于stack exchange，提问作者Pradnya Kulkarni