Question

使用 Nextjs 在 Webpack 5 中打包 mp3 文件

2021-09-26

4366

reactjs typescript webpack next.js webpack-5

我目前正在使用 [email protected] 和 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" />

参考：静态文件服务

Next.js can serve static files, like images, under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the base URL ( / ).

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

// types/sounds.d.ts

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

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