Angular13中用@angular-builders/custom-webpack修改webpack配置

我在NX monorepo中构建Angular 13应用，该仓库包含一个使用jsx文件的React库。运行应用时，React库的jsx文件无法正确解析扩展名——所有jsx文件的导入语句必须以.jsx结尾才能正常工作。我认为需要在webpack配置的resolve.extensions数组中添加jsx，因此使用了@angular-builders/custom-webpack包，操作步骤如下：

• 执行安装命令：npm install --save-dev @angular-builders/custom-webpack@13
• 在应用根目录创建custom-webpack.config.js，内容如下：

module.exports = {
    resolve: {
        extensions: ['', '.tsx', '.ts', '.js','min.js', 'jsx']
      }
  };

• 修改angular.json中的配置：将architect.build.builder从"builder": "@angular-devkit/build-angular:browser"改为"builder": "@angular-builders/custom-webpack:browser"，并在architect.build.options中添加：

"customWebpackConfig": {
  "path": "custom-webpack.config.js",
  "replaceDuplicatePlugins": true
},

• 将architect.serve.builder从"builder": "@angular-devkit/build-angular:dev-server"改为"builder": "@angular-builders/custom-webpack:dev-server"

应用能正常构建和运行，但去掉.jsx后缀的导入语句export * from './lib/my-component'会报错，带后缀的export * from './lib/my-component.jsx'则正常。请问我的处理方法是否正确？自定义webpack文件的配置方式是否正确？

你的整体思路是正确的——通过@angular-builders/custom-webpack扩展Webpack配置来支持JSX扩展名解析，但你的Webpack配置存在两处问题，导致不带后缀的导入无法生效：

1. 扩展名格式错误：jsx应该写成.jsx（带点前缀），否则Webpack无法识别这是一个合法的文件扩展名。
2. 空字符串扩展名无效：在适配Angular 13的Webpack版本中，空字符串''已经不再被支持，这会干扰默认的扩展名解析逻辑，需要移除。

修正后的custom-webpack.config.js如下：

module.exports = {
    resolve: {
        extensions: ['.tsx', '.ts', '.js', '.min.js', '.jsx']
    }
};

另外，建议调整customWebpackConfig中的replaceDuplicatePlugins参数：由于你只是扩展resolve.extensions而非替换核心插件，将其设为false可以避免覆盖Angular默认Webpack配置中必要的插件，防止出现潜在问题。修改angular.json中的对应配置：

"customWebpackConfig": {
  "path": "custom-webpack.config.js",
  "replaceDuplicatePlugins": false
},

完成以上调整后，不带.jsx后缀的导入语句就能被Webpack正常解析，无需手动添加扩展名。

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