webpack打包去除代码中的console.log()

默认情况下，Babel 只会处理你的源代码文件，而不会处理 node_modules 目录中的依赖包。这意味着使用 babel-plugin-transform-remove-console 只能移除你自己代码中的 console.log，不能移除依赖包中的 console.log。

如果你确实需要移除依赖包中的 console.log，你可以尝试以下方法：

方法 1：使用 babel-plugin-transform-remove-console 并修改 Babel 配置以处理 node_modules

虽然通常不建议处理 node_modules 中的文件，但你可以通过配置 Babel 处理这些文件来移除依赖包中的 console.log。

安装 babel-plugin-transform-remove-console：

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

配置 Babel：

在你的 Babel 配置文件（如 .babelrc 或 babel.config.js）中，添加 babel-plugin-transform-remove-console 插件，并确保 Babel 处理 node_modules 目录。

.babelrc 文件配置示例：

{
  "plugins": ["transform-remove-console"],
  "ignore": []
}

babel.config.js 文件配置示例：

module.exports = {
  plugins: ["transform-remove-console"],
  ignore: []
};

配置 Webpack 处理 node_modules：

在你的 webpack.config.js 中，确保 Babel loader 处理 node_modules 目录：

module.exports = {
  // 其他配置项...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules\/(?!(your-module-name)\/).*/,
        use: {
          loader: 'babel-loader',
          options: {
            plugins: ['transform-remove-console'],
          },
        },
      },
    ],
  },
};

这种方法会显著增加构建时间，并可能导致其他依赖包出现问题。因此，请谨慎使用。

方法 2：使用 terser-webpack-plugin

另一种方法是使用 terser-webpack-plugin 来移除所有的 console.log，包括依赖包中的 console.log。terser-webpack-plugin 是一个 Webpack 插件，可以在压缩代码时移除 console.log。

安装 terser-webpack-plugin：

pnpm install terser-webpack-plugin --save-dev

配置 Webpack：

在你的 webpack.config.js 中，配置 terser-webpack-plugin：

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // 其他配置项...
  optimization: {
    minimize: true, // 必须开启，否则配置不失效
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,
          },
        },
      }),
    ],
  },
};

构建项目：

运行 Webpack 构建命令来生成优化后的代码：

npm run build
这种方法不会增加构建时间太多，并且能可靠地移除所有的 console.log 语句，包括依赖包中的 console.log。