terser-webpack-plugin如何去忽略react项目中的console(分为umi和非umi项目)

1、对于antdesignpro生成的项目,因为是使用的umi(基于webpack再封装),所以忽略console的做法如下:
1)首先去查看当前项目的webpack的版本,如果当前webpack版本低于5.0,则我们需要去安装terser-webpack-plugin的版本也需要低于5;如果当前webpack版本大于5.0,则不需要安装,因为webpack自带最新
2)在项目目录的config/pulgin.config.js,配置如下:
在这里插入图片描述
根据process参数配置在不同环境是否显示console
在这里插入图片描述

config.plugin('TerserPlugin').use(TerserPlugin, [{
    terserOptions: {
      compress: {
        drop_console: process.env.NODE_ENV === 'production'
      }
    }
  }]);

2、对于create-react-app生成的项目,修改配置如下:
在node_module/react-scripts/config/webpack.config.js和config/webpack.config.js文件下修改
在这里插入图片描述

compress: {
 warnings: false,
   drop_debugger: true,
   drop_console: true,//不打印log
 }

猜你喜欢

转载自blog.csdn.net/qq_37174991/article/details/119611106
今日推荐