vue2 - vue 2 项目 terser-webpack-plugin 去除 console失效？

Question

vue 2 项目 terser-webpack-plugin 去除 console失效？
vue.config.js 的配置？

const pathNode = require("path");
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const TEST_BASE_URL = process.env.VUE_APP_BASE_URL;

// vue.config.js
module.exports = {
  transpileDependencies: ["vuex-module-decorators"],
  publicPath: "/", // 基本路径
  outputDir: "dist", // 设置项目打包生成的文件的存储目录，可以是静态路径也可以是相对路径。
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "~@/assets/css/style.scss";`
      }
    }
  },
  chainWebpack: config => {
    config.resolve.alias
      .set("@", pathNode.resolve(__dirname, "./src"))
      .set("@store", pathNode.resolve(__dirname, "./src/store"))
      .set("@js", pathNode.resolve(__dirname, "./src/assets/js"))
      .set("@css", pathNode.resolve(__dirname, "./src/assets/css"))
      .set("@img", pathNode.resolve(__dirname, "./src/assets/imgs"))
      .set("@c", pathNode.resolve(__dirname, "./src/components"))
      .set("@view", pathNode.resolve(__dirname, "./src/views"));
  },
  configureWebpack: config => {
    if (process.env.VUE_APP_ENV === "production") {
      return {
        devtool: "none",
        optimization: {
          minimizer: [
            new TerserPlugin({
              terserOptions: {
                compress: {
                  drop_console: true, // 移除 console 语句
                  drop_debugger: true, // 移除 debugger 语句
                  pure_funcs: ['console.log'] // 移除 console.log
                }
              }
            })
          ]
        },
        plugins: [
          new CompressionWebpackPlugin({
            algorithm: "gzip", // 使用 gzip 压缩
            test: /\.(js|css|html)$/, // 匹配要压缩的文件类型
            threshold: 10240, // 只有大于 10KB 的文件才会被压缩
            minRatio: 0.8 // 最小压缩率
          })
        ]
      };
    } else {
      return {
        devtool: false,
        optimization: {
          minimizer: [
            new TerserPlugin({
              terserOptions: {
                compress: {
                  drop_console: true, // 移除 console 语句
                  drop_debugger: true, // 移除 debugger 语句
                  pure_funcs: ['console.log'] // 移除 console.log
                }
              }
            })
          ]
        },
        plugins: [
          new CompressionWebpackPlugin({
            algorithm: "gzip", // 使用 gzip 压缩
            test: /\.(js|css|html)$/, // 匹配要压缩的文件类型
            threshold: 10240, // 只有大于 10KB 的文件才会被压缩
            minRatio: 0.8, // 最小压缩率
            filename: "[path][base].gz" // 自定义压缩文件名
          })
        ]
      };
    }
  }
};

Answer 1

为了加快开发速度，在开发模式下，webpack 不会最小化 js

或者可以手动设置 optimization.minimize = true https://webpack.docschina.org/configuration/optimization/#opt...

Answer 2

根文件调用一下 线上环境需要调试也可打开console

   webpackClearConsole() {
    if (!location.search.includes('debug') && process.env.NODE_ENV === 'production') {
      const consoles = window.console as Console;
      for (const item in consoles) {
        if (Reflect.has(consoles, item)) {
          consoles[item as keyof Console] = (() => { }) as never;
        }
      }
    }
  }

Answer 3

你的代码顶部加了判断生产环境

---

参考vue打包去除日志
你需要控制minimize属性为true即可

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

module.exports = {
    configureWebpack: {
        optimization: {
            minimize: true,
            minimizer: [
                new TerserPlugin({
                    terserOptions: {
                        ecma: undefined,
                        warnings: false,
                        parse: {},
                        compress: {
                            drop_console: true,
                            drop_debugger: true,
                            pure_funcs: ['console.log'], // 移除console
                        },
                    },
                }),
            ],
        },
    }
}

Answer 4

因为从 webpack 4 开始，会根据 mode 来执行不同的优化。
TerserPlugin 只在生产环境中生效，不在开发环境中生效。

选项	描述
development	会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development，启用 NamedChunksPlugin 和 NamedModulesPlugin 优化选项
production	会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production， 启用 FlagDependencyUsagePlugin , FlagIncludedChunksPlugin , ModuleConcatenationPlugin , NoEmitOnErrorsPlugin , OccurrenceOrderPlugin , SideEffectsFlagPlugin 和 TerserPlugin 优化选项
none	不使用任何默认优化选项

如果想要在线上测试环境之类的生效，可以在对应的环境变量配置文件中声明 NODE_ENV = production

Mode | webpack

Answer 5

这个在生产环境下可以正常去除console