Angular 13集成opus-recorder遇跨域错误，Webpack配置无效求助

核心原因 #

Angular 13基于Webpack 5，你当前使用的file-loader已被Webpack 5内置的Asset Modules替代，原有配置无法正确识别并打包Worker文件，进而触发跨域错误。

解决步骤 #

1. 更新Webpack配置（替换file-loader为Asset Modules）

修改自定义Webpack配置文件，使用Webpack 5原生的asset/resource类型处理Worker文件：

import type { Configuration } from 'webpack';
module.exports = {
  module: {
    rules: [{
      test: /(encoderWorker|decoderWorker|waveWorker)\.min\.js$/,
      type: 'asset/resource',
      generator: {
        filename: 'assets/workers/[name].[hash][ext]' // 可选：指定输出目录，便于资源管理
      }
    }]
  }
} as Configuration;

2. 调整Worker初始化代码

移除单独的路径导入，直接通过URL语法让Webpack自动解析Worker文件路径，确保打包流程能捕获这些文件：

// 直接创建Worker，无需提前导入路径变量
const decoderWorker = new Worker(new URL('opus-recorder/dist/decoderWorker.min.js', import.meta.url));
const wavWorker = new Worker(new URL('opus-recorder/dist/waveWorker.min.js', import.meta.url));

3. 确认自定义Webpack配置生效

确保已安装并配置@angular-builders/custom-webpack，让Angular加载自定义配置：

• 安装依赖：

  npm install @angular-builders/custom-webpack --save-dev
  

• 修改angular.json中项目的build/serve配置：

  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js"
            },
            // 保留原有其他配置
          }
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server"
        }
      }
    }
  }
  

4. 验证生产构建

运行ng build后，检查dist目录，确认Worker文件已被打包输出（比如在assets/workers目录下），生产环境将不会出现跨域问题。

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