使用 Webpack 和 Uglify 删除 console.logs

问题描述 投票：0回答：11

我正在尝试使用 Webpack 的 Uglify 插件删除 

console.logs
，但似乎与 Webpack 捆绑在一起的 Uglify 插件没有该选项，文档中没有提及。

我正在从 webpack 初始化 uglify，如下所示：

new webpack.optimize.UglifyJsPlugin()

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

问题是

drop_console
不起作用。

reactjs webpack babeljs uglifyjs
11个回答
97
投票

使用 

UglifyJsPlugin
，我们可以处理 评论、警告、控制台日志，但在开发模式下删除所有这些并不是一个好主意。首先检查你是否正在运行
webpack
for 
prod env or dev env
，如果是
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,
          },
        },
      }),
    ],
  },
};
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
替代。

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: {...}
    }];
};
8
投票

这是 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 => 用 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，...等等）（不推荐🙅🏻u200d♂️）

drop_console：正确，

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

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

所有游戏机

Chrome Google，版本 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
          },
        },
      }),
    ],
  },
0
投票

在 Webpack 4 中，您可以使用 webpack 配置文件中的 

stats
属性修改终端输出：

module.exports = {
  //...
  stats: 'errors-only',
};

有关更多信息，请参阅文档：https://webpack.js.org/configuration/stats/

-1
投票

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

module.exports = {
plugins: [
        new UglifyEsPlugin({
            compress:{
                drop_console: true
            }
        }),
] 
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.