如何在 webpack 中包含 ogg 和 mp3 文件格式？答案

【问题标题】：How to include ogg and mp3 file formats in webpack?如何在 webpack 中包含 ogg 和 mp3 文件格式？
【发布时间】：2020-08-11 18:21:54
【问题描述】：

我正在进行 Phaser3 项目，目前正在尝试为游戏添加音乐和声音。但是，我无法加载任何声音文件，但它位于 src/assets 文件夹中。我正在使用 webpack 来运行 localhost。下面的文件（base.js）表明我允许声音格式，但由于某种原因它没有加载，可能是基本文件不正确。

错误日志： 8080/assets/hit.ogg:1 Failed to load resource: the server responded with a status of 404 (Not Found)

base.js

const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  mode: "development",
  devtool: "eval-source-map",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: [/\.vert$/, /\.frag$/],
        use: "raw-loader"
      },
      {
        test: /\.(gif|png|jpe?g|svg|xml|ogg|wav|mp3)$/i,
        use: "file-loader"
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin({
      root: path.resolve(__dirname, "../")
    }),
    new webpack.DefinePlugin({
      CANVAS_RENDERER: JSON.stringify(true),
      WEBGL_RENDERER: JSON.stringify(true)
    }),
    new HtmlWebpackPlugin({
      template: "./index.html"
    })
  ]
};

如何修复文件，以便允许加载声音/音乐文件。 TIA。

【问题讨论】：

标签： javascript webpack webpack-dev-server phaser-framework webpack-4

【解决方案1】：

我最终使用了来自 Node.js 的 require('./assets/hit.ogg')。不确定它在部署时是否会导致问题，但它可以在 localhost 中运行。

【讨论】：