IOS美区账号微信: springsunshine2017

前端技术 · 2021年9月26日 0

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输出的全部内容 欢迎讨论