直入主题

Overview

customize-cra takes advantage of react-app-rewired's config-overrides.js file. By importing customize-cra functions and exporting a few function calls wrapped in our override function, you can easily modify the underlying config objects (webpack, webpack-dev-server, babel, etc.) that make up create-react-app.
翻译：customize-cra利用react-app-rewired的config-overrides.js文件。通过导入customize-cra函数并导出覆盖函数中包含的几个函数调用，您可以轻松修改组成create-react-app的底层配置对象（webpack、webpack-dev-server、babel等）。

说人话

上面都是抄的，说人话就是config-overrides.js文件能在不暴露webpack文件时修改打包的配置对象，搞起来。
感觉自己行了的，可以直接去看api文档，照猫画虎。
下面是我的配置代码

// config-overrides.js
/* eslint-disable no-useless-computed-key */
const {
  override,
  addWebpackAlias,
  addWebpackResolve,
  fixBabelImports,
  addLessLoader,
  adjustStyleLoaders,
  addWebpackPlugin,
  addWebpackModuleRule,
} = require('customize-cra');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); // 代码压缩
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); // 大文件定位
const ProgressBarPlugin = require('progress-bar-webpack-plugin'); // 打包进度
const CompressionPlugin = require('compression-webpack-plugin'); // gzip压缩
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // css压缩
const path = require('path');

module.exports = override(
  // 导入文件的时候可以不用添加文件的后缀名
  addWebpackResolve({
    extensions: ['.tsx', '.ts', '.js', '.jsx', '.json'],
  }),
  // 路径别名
  addWebpackAlias({
    ['@']: path.resolve(__dirname, 'src'),
  }),
  // less预加载器配置
  addLessLoader({
    strictMath: true,
    noIeCompat: true,
    modifyVars: {
      '@primary-color': '#1DA57A', // for example, you use Ant Design to change theme color.
    },
    cssLoaderOptions: {}, // .less file used css-loader option, not all CSS file.
    cssModules: {
      localIdentName: '[path][name]__[local]--[hash:base64:5]', // if you use CSS Modules, and custom `localIdentName`, default is '[local]--[hash:base64:5]'.
    },
  }),
  // 注意是production环境启动该plugin
  process.env.NODE_ENV === 'production' &&
    addWebpackPlugin(
      new UglifyJsPlugin({
        // 开启打包缓存
        cache: true,
        // 开启多线程打包
        parallel: true,
        uglifyOptions: {
          // 删除警告
          warnings: false,
          // 压缩
          compress: {
            // 移除console
            drop_console: true,
            // 移除debugger
            drop_debugger: true,
          },
        },
      })
    ),
  addWebpackPlugin(new MiniCssExtractPlugin()),
  // 判断环境变量ANALYZER参数的值
  process.env.ANALYZER && addWebpackPlugin(new BundleAnalyzerPlugin()),
  // 打包进度条
  addWebpackPlugin(new ProgressBarPlugin()),
  // 需要nginx配合
  // addWebpackPlugin(
  //   new CompressionPlugin({
  //     filename: '[path][base].gz',
  //     algorithm: 'gzip',
  //     test: /\.js$|\.html$|\.css/,
  //     threshold: 10240, // 只有大小大于该值的资源会被处理 10240字节
  //     minRatio: 1, // 只有压缩率小于这个值的资源才会被处理
  //     deleteOriginalAssets: false, // 删除原文件
  //   })
  // )
  addWebpackModuleRule({
    test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
    loader: require.resolve('url-loader'),
    options: {
      limit: 64,
      name: 'static/media/[name].[hash:8].[ext]',
    },
  })
  addWebpackModuleRule({
    test: [/\.css$/, /\.less$/], // 可以打包后缀为sass/scss/css的文件
    use: ['style-loader', 'css-loader', 'less-loader'],
  })
);

说几个常用的配置

addWebpackAlias 相当于 webpack的Plugin
addWebpackModuleRule 相当于webpack里Module的rules
addWebpackAlias 相当于 webpack里resolve的alias，添加路径别名
addWebpackExternals 相当于 webpack里Externals，添加外部扩展CDN

其他的大火自己去看，简单的一些配置=》好使

最后加点水，我的爬坑之路，我是怎么一步步被迫学习这些配置的，看看你们有没有遇到过相同的报错

爬坑之路

我写的烂代码出了一个bug，我删除node_modules重新下载希望能解决bug①，但是失败了结果又产生了build失败(报错①如下图)的新bug②（强行混工时）！看了很多百度上cv的水文没解决，最后自己从webpack到customize-cra再到config-overrides.js配置，最终花了大半天解决了。所以记录下自己的解决过程看看能不能帮到大火。

报错截图 Error: You forgot to add 'mini-css-extract-plugin' plugin (i.e. `{ plugins: [new MiniCssExtractPlugin()] }`)

查了下要配置webpack.config.js，但我项目里没有配置webpack的config文件夹。
有人会问为啥不“npm run eject”暴露出来，答案就是我不想呀，多那么多文件看起来头疼。create-react-app创建react项目的时候包含的customize-cra插件里提供的config-overrides.js文件能帮我们覆盖webpack里的一些配置，完全够用了。
我按着customize-cra的api说明，加了条 addWebpackPlugin(new MiniCssExtractPlugin())

原先的报错是没了，出来个新的错误②：TypeError: value.split is not a function

TypeError: value.split is not a function

看不懂了，这提示的好简单呀，但是我看里头有css字样，应该是样式打包的问题，我就加了点rule

addWebpackModuleRule({
    test: [/\.css$/], // 可以打包后缀为sass/scss/css的文件
    use: ['style-loader', 'css-loader'],
  })

还有错，百度后感觉少了个less，就再加了点

addWebpackModuleRule({
    test: [/\.css$/, /\.less$/], // 可以打包后缀为sass/scss/css的文件
    use: ['style-loader', 'css-loader'],
  })

错误变了：CssSyntax error: Unknown word (14:3)

CssSyntax error: Unknown word (14:3)

我一想是不是确实less的加载器，又改了下

addWebpackModuleRule({
    test: [/\.css$/, /\.less$/], // 可以打包后缀为sass/scss/css的文件
    use: ['style-loader', 'css-loader', 'less-loader'],
})

这回成了！！菜菜的我在疯狂尝试中解决了这个bug
文档看着就是香，比花时间一个个点百度上那些水文肯定有效率！当然前提是你问题定位是对的，不然还是得挨个试错

react build配置插件customize-cra介绍

react build配置插件customize-cra介绍

直入主题

Overview

说人话

爬坑之路

推荐阅读更多精彩内容