Webpack5.40.0无对应loader处理文件，react-native-web移植RN项目报错求助

• 修复babel-loader的匹配规则
  你当前的babel-loader test正则/\.js$|(tsx|jsx)?$/存在逻辑缺陷，无法正确匹配.ts、.tsx后缀文件，属于核心错误，修改为：

test: /\.(js|jsx|ts|tsx)$/,

• 适配Webpack5 静态资源处理规则
  Webpack5 已内置Asset Modules替代旧版的url-loader、file-loader，你当前使用的url-loader大概率和Webpack5版本不兼容，替换imageLoaderConfiguration和svgLoaderConfiguration配置：

const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png)$/,
  type: 'asset/resource',
  generator: {
    filename: '[name][ext]'
  }
};

const svgLoaderConfiguration = {
  test: /\.svg$/,
  oneOf: [
    {
      resourceQuery: /inline/, // 支持 ?inline 导入为SVG组件
      use: ['@svgr/webpack']
    },
    {
      type: 'asset/resource',
      generator: {
        filename: '[name][ext]'
      }
    }
  ]
};

如果要保留@svgr/webpack需要确认安装的版本兼容Webpack5。

• 调整babel.config.js配置
  原metro-react-native-babel-preset仅适配RN原生端构建，补充web端转译需要的预设：
  首先安装缺失依赖：

npm install @babel/preset-env @babel/preset-react @babel/preset-typescript --save-dev

修改babel.config.js：

module.exports = {
  presets: [
    'module:metro-react-native-babel-preset',
    '@babel/preset-env',
    '@babel/preset-react',
    '@babel/preset-typescript'
  ],
};

• 补全需要编译的RN依赖
  将项目中用到的所有react-native生态第三方依赖（比如react-native-gesture-handler、react-native-reanimated等）全部加到compileNodeModules数组中，这些依赖默认是未编译的，需要babel处理：

const compileNodeModules = [
  'react-native-gesture-handler',
  'react-native-reanimated',
  // 补充其他项目中用到的RN生态依赖
].map(moduleName => path.resolve(appDirectory, `node_modules/${moduleName}`));

• 检查基础依赖安装
  确认已安装所有必要的构建依赖：

npm install babel-loader @babel/core --save-dev

修改完以上配置后重新执行构建即可解决loader适配问题。

内容的提问来源于stack exchange，提问作者Roman Khomiakov