Webpack 5 中的 mp3 文件与 Nextjs

Question

我目前正在使用 next@11.1.2 和 webpack v5，并在修复 mp3 加载方面卡住了几个小时。我尝试了 stack 和 GitHub 上的其他几个解决方案。他们都不为我工作。

Type error: Cannot find module 'public/sounds/bighit.mp3' or its corresponding type declarations.

  14 | 
  15 | // Assets
> 16 | import sound_bighit from "public/sounds/bighit.mp3"
     |                          ^
info  - Checking validity of types .%       

这是我最后的 webpack 配置：

const path = require('path')
const SRC = path.resolve(__dirname, 'public/sounds/')

module.exports = {
    webpack: (config, { }) => {

        config.module.rules.push({
            test: /\.mp3$/,
            incluse: SRC,
            use: {
                loader: 'file-loader',
                options: {
                    name: '[name].[contenthash].[ext]',
                    outputPath: 'public/sounds/',
                    publicPath: 'public/sounds/'
                }
            }

        })

        // config.module.rules.push({
        //     test: /\.mp3$/,
        //     use: {
        //         loader: 'file-loader',
        //     },
        // })

        // config.module.rules.push({
        //     test: /\.mp3/,
        //     use: {
        //         loader: 'url-loader',
        //     },
        // })

        return config
    }
}

Answer 1

无需导入此类文件。Next.js 支持将资源放入public文件夹中。删除您的自定义 webpack 配置，然后只需执行以下操作：

<audio controls src="/sounds/bighit.mp3" />

请参阅：静态文件服务

publicNext.js 可以在根目录中调用的文件夹下提供静态文件，例如图像。public然后，您的代码可以从基本 URL ( ) 开始引用其中的文件/。

另外，您收到的错误是 TypeError，要修复它，您可以尝试：

// types/sounds.d.ts

declare module "*.mp3" {
  const content: string;
  export default content;
}

请参阅：导入其他资产 | TypeScript-webpack