什么是 npm 包 parcel-plugin-url-loader-extra？
parcel-plugin-url-loader-extra 是一个用于 Parcel 的插件，它可以帮助我们在打包过程中处理 CSS 文件中的 URL 路径，使得 URL 路径指向正确的目标文件。
为什么需要 parcel-plugin-url-loader-extra？
在 Web 前端开发中，我们通常需要将 CSS、JavaScript 等文件打包到一个或多个浏览器可识别的文件中。而其中 CSS 文件中通常会包含大量的图片、字体等资源文件，这些文件的路径需要正确地指向它们所在的目标路径，否则打包后的文件无法正确地显示所需的资源。
因此，需要一个工具来自动处理 CSS 文件中的 URL 路径，以确保这些路径所指向的目标文件正确。
如何使用 parcel-plugin-url-loader-extra？
使用 parcel-plugin-url-loader-extra 非常简单。以下是使用 parcel-plugin-url-loader-extra 的步骤：
1. 安装 parcel-plugin-url-loader-extra
在终端中输入以下命令：
npm install parcel-plugin-url-loader-extra --save-dev
2. 在项目中配置 parcel.config.js
在项目的根目录中新建一个名为 parcel.config.js 的文件，并写入以下代码：
-- -------------------- ---- -------
-------------- - -
-------- -
-
-------- ---------------------------------
-------- -
---------- ------ -- ---- --- -- -------- -----
---------------- ----- -- ------------ ----
---------------------- --- -- ----------------------
------------------------- --- -- ------------
----------- -------- -------- ------- ------- ------- -- ----------
-
-
-
-其中，stripHash 表示是否去除 URL 中的 hash，默认为 false；useRelativePath 表示是否使用相对路径，默认为 true；additionalPublicPaths 表示需要额外处理的公共路径，可以是绝对路径或相对路径，如果设置了该值，插件会将这些路径中的 URL 路径替换成对应的目标路径；additionalFileExtensions 表示需要额外处理的文件扩展名；extensions 表示允许处理的文件扩展名。
3. 在 CSS 文件中使用 URL 路径
在 CSS 文件中使用 URL 路径，例如：
background-image: url('./images/bg.png');其中，./images/bg.png 表示该文件相对于 CSS 文件的路径。
4. 执行打包命令
在终端中执行打包命令，例如：
parcel build index.html
打包完成后，插件会根据配置文件中的设置，将 URL 路径指向正确的目标文件。
示例代码
为了更好地说明 parcel-plugin-url-loader-extra 的使用方法，以下是一个简单的示例代码：
1. 项目结构
项目结构如上图所示，其中 index.html 是入口 HTML 文件，style.css 是样式文件，images 目录中存放着需要使用的图片文件。
2. index.html
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------------------------------------------- ----- ---------------- ------------------- ------- ------ --------------------------------------- ---- ------------------------- ------- -------
3. style.css
.background {
width: 100vw;
height: 100vh;
background-image: url('./images/bg.jpg');
}4. parcel.config.js
-- -------------------- ---- -------
-------------- - -
-------- -
-
-------- ---------------------------------
-------- -
---------- ------
---------------- -----
---------------------- ---
------------------------- ---
----------- -------- -------- ------- ------- -------
-
-
-
-以上代码中，options 配置项中的 extensions 已包含了 .jpg、.jpeg、.png、.svg、.gif 这些允许处理的文件扩展名。
5. 打包结果
在终端中执行以下命令：
parcel build index.html
打包成功后，会得到以下文件：
由于使用了 parcel-plugin-url-loader-extra 插件，打包后的 CSS 文件中的 URL 路径都已经指向了正确的目标文件。
总结
通过以上文章的介绍，我们可以了解到 npm 包 parcel-plugin-url-loader-extra 在前端开发中的作用，以及如何使用它来处理 CSS 文件中的 URL 路径。同时，我们还可以通过示例代码来更好地理解如何使用该插件。使用该插件可以大大提高前端开发效率，避免出现由于 URL 路径引起的资源文件无法正确加载的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600573c581e8991b448e9b92