使用create-react-app无需eject自定义webpack插件的方案咨询

共有两种主流的成熟方案可以实现需求，均无需暴露CRA的内置配置：

方案1：使用 react-app-rewired + customize-cra 组合 #

这是使用最广泛的轻量修改方案，通过增量覆盖的方式修改webpack配置：

• 第一步：安装基础依赖

npm install react-app-rewired customize-cra --save-dev

同时安装你需要的工具依赖：

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

注：CRA生产环境默认已内置terser-webpack-plugin，若仅需修改其配置可不用重复安装，仅当需要指定版本时单独安装即可

• 第二步：在项目根目录新建config-overrides.js文件，添加如下配置：

const { override, addWebpackPlugin, addWebpackModuleRule } = require('customize-cra');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = override(
  // 添加terser压缩插件配置
  addWebpackPlugin(
    new TerserPlugin({
      // 自定义配置项，比如开启多进程压缩、移除console等
      parallel: true,
      terserOptions: {
        compress: {
          drop_console: true,
        },
      },
    })
  ),
  // 添加image-webpack-loader配置
  addWebpackModuleRule({
    test: /\.(png|jpe?g|gif|svg)$/i,
    use: [
      {
        loader: 'image-webpack-loader',
        options: {
          // 自定义图片压缩配置
          mozjpeg: {
            quality: 80,
          },
          optipng: {
            enabled: false,
          },
        },
      },
    ],
  })
);

• 第三步：修改package.json中的scripts字段，将react-scripts替换为react-app-rewired：

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

方案2：使用 CRACO (Create React App Configuration Override) #

该方案是社区认可度较高的配置覆盖方案，配置结构更清晰：

• 第一步：安装基础依赖

npm install @craco/craco --save-dev

同样安装所需的loader和plugin依赖。

• 第二步：在项目根目录新建craco.config.js文件，添加如下配置：

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  webpack: {
    plugins: [
      new TerserPlugin({
        // 自定义terser配置
        parallel: true,
        terserOptions: {
          compress: { drop_console: true }
        }
      })
    ],
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif|svg)$/i,
          use: [{ 
            loader: 'image-webpack-loader',
            options: { /* 自定义图片压缩参数 */ } 
          }]
        }
      ]
    }
  }
};

• 第三步：修改package.json中的scripts字段，将react-scripts替换为craco：

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

注意事项 #

• 两种方案均为增量修改，不会覆盖CRA的默认配置，也不会破坏原有项目的功能逻辑
• 配置image-webpack-loader时，建议放在默认图片处理规则之后执行，避免影响CRA内置的asset资源处理逻辑
• 升级CRA版本后建议先测试配置是否兼容，大版本迭代可能会出现配置适配问题

内容的提问来源于stack exchange，提问作者Juan Luis Torres