webpack(vue/react)打包过滤删除注释，禁止控制台consoles输出

对于vue或者react项目，生成环境中有时候会有过滤删除注释以及禁止控制台consoles输出的需求，一方面，这样处理可以减小打包后的包文件大小，另一方面，可以加大其他人员对包的分析难度。

场景

那么如何实现这样的配置呢？我这里分两种场景：
1、webpack.conf.js已暴露，可以直接修改
2、webpack.conf.js为暴露，需要借助customize-cra暴露webpack配置

（customize-cra使用参考：customize-cra使用）

插件

使用到的插件：UglifyJsPlugin 如有报错，请降版本至：^1.1.1

代码

场景一：webpack.conf.js中的代码如下

module.exports = {  optimization: {        minimizer: [new UglifyJsPlugin({          sourceMap: false,          uglifyOptions: {            output:{              comments:false //过滤注释            },            compress: {              warnings: false,              drop_console: true,//关闭console               drop_debugger: false,              pure_funcs: [‘console.log’]            }          }        })]      },};

场景二：config-overrides.js中的代码如下

module.exports = override(  (config) => {    //暴露webpack的配置    process.env.NODE_ENV === “production” &&      (config.plugins = [        …config.plugins,        new UglifyJsPlugin({          sourceMap: false,          uglifyOptions: {            output: {              comments: false, // 不输出注释            },            // 删除console debugger 删除警告            compress: {              warnings: false,              drop_console: true, //清除 console              drop_debugger: true, //清除 debugger              pure_funcs: [“console.log”], //移除console            },          },        }),      ]);    return config;  });

以上就是关于webpack(vue/react)打包过滤删除注释，禁止控制台consoles输出的全部内容 欢迎讨论