对于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输出的全部内容 欢迎讨论
近期评论