logo标签列表

使用Webpack和Uglify移除控制台日志

reactjswebpackbabeljsuglifyjs
67

我试图使用Webpack的Uglify插件移除console.logs，但似乎Webpack捆绑的Uglify插件没有该选项，在文档中也没有提到。

我是这样从Webpack初始化uglify的：

new webpack.optimize.UglifyJsPlugin()

我的理解是，我可以使用独立的Uglify库来获取所有选项，但我不知道哪一个是正确的？

问题在于drop_console无效。

10个回答
95

使用 UglifyJsPlugin 我们可以处理注释、警告、控制台日志，但在开发模式下删除所有这些内容并不是一个好主意。首先检查您是否正在运行prod env or dev env的webpack，如果是prod env，那么您可以像这样删除它们：

var debug = process.env.NODE_ENV !== "production";

plugins: !debug ? [
   new webpack.optimize.UglifyJsPlugin({

     // Eliminate comments
        comments: false,

    // Compression specific options
       compress: {
         // remove warnings
            warnings: false,

         // Drop console statements
            drop_console: true
       },
    })
]
: []

参考资料：https://github.com/mishoo/UglifyJS2#compressor-options

更新 2019：现在需要使用 terser 插件以支持在webpack v4中使用ES6。 https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        sourceMap: true, // Must be set to true if using source-maps in production
        terserOptions: {
          compress: {
            drop_console: true,
          },
        },
      }),
    ],
  },
};
1
我正在使用 drop_console: true，但它无法删除控制台日志。 起初我以为是 webpack 的 uglify 插件没有这些选项，因为在官方的 webpack 文档中没有提到它们。 但似乎我正在使用正确的 uglify 插件，只是 drop_console 不起作用。这是我的 webpack 配置：http://pastebin.com/tvymXfZ0 - Mladen Petrovic
我正在使用相同的代码，当我使用webpack -p构建时, 一切都正常工作。 - Mayank Shukla
在Webpack 4中，这个不起作用：webpack.optimize.UglifyJsPlugin已被移除，请使用config.optimization.minimize代替。 - dude
1
请参见：https://dev59.com/36nka4cB1Zd3GeqPPocC - dude
需要按照官方文档中的说明添加 minimize: true，例如：optimization: { minimize: true, minimizer: [new TerserPlugin()], }, - Sp4Rx
显示剩余2条评论
60

尝试使用drop_console：

plugins: [
    new Webpack.optimize.UglifyJsPlugin({
      compress: {
        drop_console: true,
      }
    }
]
更新： 对于webpack v4，它已经有了一些改变：
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

...

optimization: {
  minimizer: [
    new UglifyJSPlugin({
      uglifyOptions: {
        compress: {
          drop_console: true,
        }
      }
    })
  ]
}

我个人认为控制台日志（特别是console.error）在生产环境中非常有用，认为保留它们是一个好主意。如果您真的想要删除特定的控制台函数，比如只是console.log，那么您应该使用pure_funcs选项，例如pure_funcs: ['console.log']，这将删除console.log，因为纯函数不会产生副作用，Uglify可以丢弃未分配给任何东西的函数。

optimization: {
  minimizer: [
    new UglifyJSPlugin({
      uglifyOptions: {
        compress: {
          // Drop only console.logs but leave others
          pure_funcs: ['console.log'],
        },
        mangle: {
          // Note: I'm not certain this is needed.
          reserved: ['console.log']
        }
      }
    })
  ]
}

TerserJS (Uglify已过时，不支持新的JS功能，你不应该使用它)

optimization: {
  minimizer: [
    new TerserPlugin({
      terserOptions: {
        compress: {
            drop_console: true
        }
      }
    })
  ]
}

如之前所述，你也可以使用pure_funcs。

4
这正是我尝试过的，但它没有起作用。我可以看到它会使代码难看，但却不会删除控制台日志。 - Mladen Petrovic
3
在Webpack 4中，这个方法行不通：webpack.optimize.UglifyJsPlugin已被移除，请使用config.optimization.minimize代替。 - dude
1
我需要同时使用Terser和Uglify吗？ - Batman
// 只删除 console.logs，但保留其他内容 pure_funcs: ['console.log'],// 删除所有 console，包括 (console.log, console.error, console.warn, ...等等) drop_console: true, - xgqfrms
TerserPlugin的方法对我有效，但仅在mode：“production”或未指定模式时。 - sergej
显示剩余5条评论
11
您可以使用terser-webpack-plugin的compress选项中的pure_funcs参数，有选择地删除控制台函数并保留您想要的函数，例如console.error。
我使用的是"webpack": "^4.39.3"和"terser-webpack-plugin": "^2.3.2"。
步骤：
1. npm install terser-webpack-plugin --save-dev
2.修改您的webpack.config文件，将TerserPlugin设置为优化选项的压缩工具。
const TerserPlugin = require('terser-webpack-plugin');

module.exports = (env) => {
    return [{
        entry: '...',
        mode: 'production',
        output: {...},
        plugins: [...],
        optimization: {
            'minimize': true,
            minimizer: [new TerserPlugin({
                terserOptions: { 
                    compress: { 
                        pure_funcs: [
                            'console.log', 
                            'console.info', 
                            'console.debug', 
                            'console.warn'
                        ] 
                    } 
                 }
            })],
        },
        module: {...}
    }];
};
这确实可以用于在Webpack5的生产模式下隐藏控制台日志。然而，在开发模式下，它也隐藏了控制台日志。能否有一种方法来禁用开发模式下的缩小器？ - Bunny
8

This is the new syntax for Webpack v4:

optimization: {
  minimizer: [
    new UglifyJSPlugin({
      uglifyOptions: {
        compress: {
          drop_console: true
        },
        output: {
          comments: false
        }
      },
    }),
  ],
},
6
对于uglifyjs-webpack-plugin插件，将选项包装在一个uglifyOptions对象中：
    plugins: [
    new UglifyJSPlugin({
        uglifyOptions: {
            compress: {
                drop_console: true
            }
        }
    })
]
4
我已经添加了有关Webpack v4的详细答案，并附上了调试配置。
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
var debug = process.env.NODE_ENV !== "production";

.....
optimization: {
        minimizer: !debug ? [
            new UglifyJsPlugin({

                    // Compression specific options
                    uglifyOptions: {
                        // Eliminate comments
                        comments: false,

                        compress: {
                            // remove warnings
                                warnings: false,

                            // Drop console statements
                                drop_console: true
                        },
                    }

                })
            ]
            : []
    }

我的package.json脚本如下：

"webpackDev": "npm run clean && export NODE_ENV=development && npx webpack",
"webpackProd": "npm run clean && export NODE_ENV=production && npx webpack -p"
4

这是我为了从我的代码中移除 alert() 和 console.log() 所做的工作。 global_defs => 将 alerts 替换为 console.log 然后 drop_console 移除所有 console.logs，现在在我的浏览器控制台中没有任何内容显示

     new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          global_defs: {
            "@alert": "console.log",
          },
          drop_console: true
        }
      }
    }),

插件版本：

"webpack":3.12.0,
"webpack-cli": "^3.0.3",
"uglifyjs-webpack-plugin": "^1.2.5",

现在uglifyjs-webpack-plugin v1.2.6已经发布，我使用了最新的文档进行翻译，所以我认为最新的插件也不会有任何问题。

3

webpack 4.x移除console.log的解决方案

  1. 仅删除console.log但保留其他控制台信息（建议 ✅）

pure_funcs: ['console.log']

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

// webpack.config.js
module.exports = {
    // ...
    optimization: {
        minimizer: [
            new UglifyJSPlugin({
                uglifyOptions: {
                    compress: {
                        pure_funcs: [
                            'console.log',
                            // 'console.error',
                            // 'console.warn',
                            // ...
                        ],
                    },
                    // Make sure symbols under `pure_funcs`,
                    // are also under `mangle.reserved` to avoid mangling.
                    mangle: {
                        reserved: [
                            'console.log',
                            // 'console.error',
                            // 'console.warn',
                            // ...
                        ],
                    },
                },
            }),
        ],
    },
    // ...
}
  1. 移除所有控制台输出，包括(console.log, console.error, console.warn等)（不建议使用 ‍♂️）

drop_console: true,

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

// webpack.config.js
module.exports = {
    // ...
    optimization: {
        minimizer: [
            new UglifyJSPlugin({
                uglifyOptions: {
                    compress: {
                        drop_console: true,
                    },
                },
            }),
        ],
    },
    // ...
}

所有游戏控制台

Google Chrome 浏览器，版本 88.0.4324.192（官方构建）（x86_64）

显示图片描述

参考资料

https://github.com/mishoo/UglifyJS#compress-options

显示图片描述

显示图片描述

0
如果TerserPlugin的drop_console没有应用，你可能需要检查你的构建文件扩展名！我在我的React项目中遇到了这个问题，并通过为.js添加测试正则表达式属性来解决它（默认是.mjs）。
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        test: /\.js(\?.*)?$/i, // you should add this property
        terserOptions: {
          compress: {
            drop_console: true,
            drop_debugger: true,
            pure_funcs: ['console.log', 'console.info'], // Delete console
          },
        },
      }),
    ],
  },
-1

使用这个更好，而且有效 const UglifyEsPlugin = require('uglify-es-webpack-plugin')

module.exports = {
plugins: [
        new UglifyEsPlugin({
            compress:{
                drop_console: true
            }
        }),
] 
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接