webpack未能加载打包音频文件

一、说明

在 webpack 中,我们发现,在项目中直接把图片(包括音频)路径拿过来使用是行不通的,要在 require 或者 import 引入之后才能使用这些资源。这是因为 webpack 会把图片当作模块来使用,而不是直接以字符串的形式(模块化是 node 编程的核心理念之一)

二、引入方式

  • require:
    • 是 AMD 规范引入方式
    • 因为是在运行时调用,所以理论上可以放在代码的任何地方
    • require 是赋值过程,其实 require 的结果就是对象、数字、字符串、函数等,再把 require 的结果赋值给某个变量
  • import
    • 是 ES6 的语法标准,如需兼容浏览器的话必须转化成 ES5 的语法
    • 在编译时调用,所以必须放在文件开头
    • import 是解构过程,但是目前所有的引擎都还没有实现 import,我们在 node 中使用 babel 支持 ES6,也仅仅是将 ES6 转码为 ES5 再执行,import 语法会被转码为 require

三、无法打包 mp3 文件(或其他文件)问题

解决方式(使用 file-loader)

  1. 可以直接在 require 时指定使用 file-loader,示例如下const sounds = require("file-loader!../assets/sounds/sounds.mp3");
  2. 可以在 webpack 中配置 file-loader,示例如下 { test: /\.mp3$/, use: 'file-loader'}
    原文作者:codingkevin
    原文地址: https://blog.csdn.net/qq_34496005/article/details/97298485
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞