在前端开发中，Webpack 是一个非常流行的模块打包器。其中 url-loader 是一个可以将静态资源如图片嵌入 JavaScript/CSS 中或者输出到文件夹的插件。然而，在某些情况下，经常会遇到 "Invalid or unexpected token" 错误。本文将介绍此问题的原因和解决方法，并提供示例代码。
问题描述
当在 Webpack4 中使用 url-loader 插件时，可能会遇到以下错误：
----- -- -------------------------- --- ------ ----- ------- ------- -- ---------- ----- --- --- ---- -- ----------- ------ -- ------ ---- ---- ----- ------- ---- ------- --- ---- ------ ----- - -------------- -------
这个错误表示 Webpack 对图片文件进行了解析，但是解析过程中出现了意外字符，导致解析失败。通常，这种错误是由于 Webpack 看到了一个二进制文件（例如图片）并尝试将其作为 JavaScript 进行解析。这显然会失败，因为图片不是有效的 JavaScript。
解决方法
要解决这个问题，我们需要一个能够正确处理二进制文件的加载器(loader)。
首先，确保安装了 file-loader 或 url-loader。 url-loader 是 file-loader 的替代品，并且具有一些额外的功能（例如自动 URL 转换和 Base64 编码）。但是，在解决这个问题时，file-loader 和 url-loader 的处理方式是相同的。这里使用 url-loader 进行示例说明。
在 webpack.config.js 中，我们需要配置 url-loader 或 file-loader 来正确处理二进制文件。
-------------- - -
------- -
------ -
-
----- ----------------------
---- -
-
------- -------------
-------- -
------ ------ -- --------------- ------ ---
--------- ------------------------------- -- ------------- ----------- ----
--------- ------------ -- ---------
----- ------------------------ -- --------
----------- ---------- -- -------
----------- ----------- -- ------ --- -----
--
--
--
--
--
--
--上面的配置代码中，test 属性用于匹配图片文件的扩展名，即：.png, .jpeg, .jpg, .gif 等。如果匹配到，则将使用 url-loader 进行加载。其中的 options 属性指定了一些参数来控制转换行为，例如：限制图片大小、输出文件名、输出路径等。
最关键的是 fallback 参数。当程序发现一个大于所限制的指定大小的文件时，其会自动将该文件分流到 file-loader 中进行处理。因此配置文件中的 fallback 属性需要指向 file-loader 的绝对路径。设置方式如文中示范。
示例代码
这里是一个简单的例子，演示了如何使用 url-loader 加载图片资源：
------ -- ---- ------------------------- ----- ------- - ------------------------------ ----------------------------- - ------------- -----------------------------------
该例子从 ./assets/images/bg.png 中加载图像，并使用 url-loader 将它作为背景图片应用于 DIV 元素上。在配置文件中按照上述要求进行编写后，运行项目即可正常展示图片。
总结
当出现 "Invalid or unexpected token" 错误时，首先需要检
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c6c1c4add4f0e0ff104773