选择react框架进行前端开发,基本上都会用到creat-react-app这个官方提供的脚手架。但是这个脚手架有个很大的弊端，不能直接对该脚手架的默认项进行配置。相比于vue最新的脚手架 @vue/cli而言，@vue/cli虽然也对webpack的配置进行了全面的封装，但是官方允许用户在项目根目录创建一个vue.config.js进行配置，并且提供了丰富的API，供用户去参考。从这一点而言，creat-react-app可以说是让人讨厌至极，根本无法和@vue/cli，相提并论。

如果用户想配置creat-react-app脚手架中的webpack进行方便开发的话，似乎只有通过npm run eject这一条路可以走，网上大部分教程也是这样，即把默认配置全部弹出进行操作。

但是，这种方法有两个缺点：

• npm run eject命名不可逆，一旦配置文件暴露后就不可再隐藏
• 扩展的配置和create-react-app内建的webpack配置混合在了一起，不利于配置出现问题后的排查。

使用react-app-rewired再配置

react-app-rewired是对create-react-app 进行自定义配置的社区解决方案。它不会直接去修改create-react-app的默认配置，而是在create-react-app配置的基础上进行扩展。但是，这种方法要搭配 customize-cra 结合使用，并且这种方法已经被蚂蚁金服出品的ant-design前端UI组件，在 create-react-app 使用教程中被废弃了。而是推荐使用craco（一个对 create-react-app 进行自定义配置的社区解决方案）。

使用craco再配置

1.安装 craco

$ yarn add @craco/craco

# OR

$ npm install @craco/craco --save

 2.在项目根目录新建craco.config.js文件

my-app
├── node_modules
├── craco.config.js
└── package.json

3.修改 package.json里的启动配置

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "craco start",
-   "build": "react-scripts build",
+   "build": "craco build",
-   "test": "react-scripts test",
+   "test": "craco test",
}

4.在生产模式下取消控制台的console配置

取消console，最常用方法是安装uglifyjs-webpack-plugin

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 module.exports = {
    webpack: {
    // 别名
    alias: {
      "@": path.resolve("src"),
    },
    plugins: [
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            warnings: false,
            drop_debugger: true,
            drop_console: true,
          },
        },
        sourceMap: false,
        parallel: true,
      }),
    ],
}

然后重启项目后会发现，

爆出这个错误：(plugin uglify) Error: Unexpected token: keyword «const»

查看安装的版本后发现，最新安装的版本是

原因:
1，是UglifyJS不支持ES6的语法。理论上不应该啊…
2，发现uglifyjs-webpack-plugin 2.0版本的Release日志中，明确提示重新切换回到uglify-js，因为uglify-es被废弃了。

出现这个问题解决的办法有：

cnpm install uglifyjs-webpack-plugin@1 --save-dev

也就是说回退版本。

还有一个方法是移除uglifyjs-webpack-plugin，使用terser-webpack-plugin

 npm install terser-webpack-plugin --save-dev

在craco.config.js中配置

const TerserPlugin = require('terser-webpack-plugin')
 module.exports = {
  webpack: {
    // 别名
    alias: {
      "@": path.resolve("src"),
    },
    plugins: [
      new TerserPlugin({
        sourceMap: true, // Must be set to true if using source-maps in production
        terserOptions: {
          ecma: undefined,
          warnings: false,
          parse: {},
          compress: {
            drop_console: process.env.NODE_ENV === "production", // 生产环境下移除控制台所有的内容
            drop_debugger: false, // 移除断点
            pure_funcs:
              process.env.NODE_ENV === "production" ? ["console.log"] : "", // 生产环境下移除console
          },
        },
      }),
    ],
}

问题解决！