如何在Nx项目中导入MP3音频文件？解决Webpack加载器报错

Webpack默认无法处理MP3这类二进制资源文件，Nx项目无需在单个libs目录下单独配置webpack，只需通过根目录或项目级配置添加资源处理规则即可解决。

方法1：用Webpack5内置Asset Modules（无需额外依赖） #

在项目根目录创建或修改webpack.config.js，扩展Nx默认Webpack配置：

const { composePlugins, withNx } = require('@nx/webpack');

module.exports = composePlugins(withNx(), (config) => {
  // 添加MP3文件处理规则
  config.module.rules.push({
    test: /\.mp3$/,
    type: 'asset/resource',
    generator: {
      filename: 'assets/sounds/[name][ext]' // 可选：指定编译后文件的输出路径
    }
  });
  return config;
});

方法2：使用file-loader（兼容Webpack4或需自定义场景） #

1. 先安装依赖：

npm install file-loader --save-dev
# 或 yarn add file-loader -D

2. 在根目录webpack.config.js中添加规则：

const { composePlugins, withNx } = require('@nx/webpack');

module.exports = composePlugins(withNx(), (config) => {
  config.module.rules.push({
    test: /\.mp3$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: 'assets/sounds/[name][ext]' // 自定义输出路径
        }
      }
    ]
  });
  return config;
});

针对单个库/项目单独配置 #

如果只想让特定的libs库或app项目生效，找到对应项目目录下的project.json，修改build目标的webpack配置路径：

{
  "targets": {
    "build": {
      "options": {
        "webpackConfig": "libs/mylib/webpack.config.js"
      }
    }
  }
}

然后在libs/mylib/webpack.config.js中编写和根目录一致的规则即可。

配置完成后重启项目，即可正常导入并使用MP3文件：

import sound from './sounds/sound.mp3';

// 示例：播放音频
const audio = new Audio(sound);
audio.play();

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