react打包去除console

react打包去除console

uglifyjs-webpack-plugin

这个webpack插件可以帮助你在打包的时候去掉console，因为我的是使用create-react-app创建的项目，并且没有使用eject将包解出来，所以我采用了customize-cra和react-app-rewired
使用：

1. 安装这三个插件

npm i customize-cra react-app-rewired --dev
npm install uglifyjs-webpack-plugin --save-dev

1. 修改package.json

   "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

1. 在项目根目录创建一个config-overrides.js
2. 将下面代码添加到config-overrides.js中

const { override, addWebpackPlugin } = require('customize-cra');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = override(
// 判断环境，只有在生产环境的时候才去使用这个插件
  // 如果不想这样做的话可以只修改build的命令为"build": "react-app-rewired build"
  process.env.NODE_ENV === 'production' && addWebpackPlugin(new UglifyJsPlugin({
    uglifyOptions: {
      compress: {
        drop_debugger: true,
        drop_console: true
      }
    }
  }))
);