react-app-rewired start运行正常但build不生成index等静态文件如何解决？

1. 直接使用react-scripts build报错的原因 #

react-scripts默认不会加载config-overrides.js配置，你配置的module-resolver路径别名插件没有生效，编译器会把components/header识别为第三方npm包，自然会提示找不到模块要求安装。

2. react-app-rewired build打包只有图片无其他资源的核心原因 #

开发环境和生产环境的webpack编译逻辑、校验严格度差异导致，核心冲突点有两个：

• TSX文件处理规则冲突：react-scripts本身内置了TS/TSX文件的编译规则，你用addWebpackModuleRule额外追加了一条TSX处理规则，导致同一份TSX文件会被两套规则先后处理。开发环境有缓存、校验逻辑宽松的情况下没有触发异常，生产环境编译时静默失败，JS/HTML相关的编译流程中断，但图片资源由单独的file-loader处理不受影响，所以最终只有图片被打包进build目录。
• Linaria loader执行逻辑异常：生产环境下Linaria提取样式的逻辑对编译顺序更敏感，重复的TSX处理规则会导致Linaria编译产物异常，进一步打断后续的资源打包流程，且错误被react-scripts的生产环境日志配置吞掉，所以打包提示成功但无对应产物。

• 调整TSX规则配置，避免重复处理
  不要用addWebpackModuleRule追加TSX规则，而是直接修改原有内置规则，加入Linaria loader，修改config-overrides.js如下：

const { useBabelRc, override, addWebpackModuleRule } = require('customize-cra');

const isDev = process.env.NODE_ENV === 'development';

// 自定义函数修改原有tsx处理规则
const addLinariaLoader = () => config => {
  config.module.rules.forEach(rule => {
    if (rule.oneOf) {
      rule.oneOf.forEach(oneOfRule => {
        // 匹配内置的tsx处理规则
        if (oneOfRule.test && oneOfRule.test.toString().includes('tsx')) {
          oneOfRule.use.push({
            loader: '@linaria/webpack-loader',
            options: {
              cacheDirectory: 'src/.linaria_cache',
              sourceMap: isDev,
            },
          })
        }
      })
    }
  })
  return config
}

module.exports = override(
  useBabelRc(),
  addLinariaLoader(),
  addWebpackModuleRule({
    test: /-icon\.svg$/,
    use: ['@svgr/webpack'],
  })
);

• 补充tsconfig路径别名配置
  如果你的项目用了TypeScript，需要在tsconfig.json的compilerOptions中添加对应别名配置，避免生产环境类型检查失败：

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "components/*": ["./components/*"],
      "styles/*": ["./styles/*"],
      "assets/*": ["./assets/*"]
    }
  }
}

• 开启详细日志排查
  如果修改后还是有问题，执行yarn build --verbose查看完整打包日志，定位被静默忽略的具体报错。

内容的提问来源于stack exchange，提问作者4 1