url-loader 是一个可以将图片转换成 base64 编码或者文件的 webpack loader。通过使用它，我们可以更方便地在前端项目中引用图片资源。
安装
你可以通过以下命令来安装 url-loader：
npm install url-loader --save-dev
配置
在 webpack 的配置文件中添加以下代码：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------------------
---- -
-
------- -------------
-------- -
------ ----- -- --------------------
----- --------------- -- -------------
----------- ---------- -- ----- -------------
--
--
--
--
--
--
--上述代码中，我们对所有 .png、.jpg 和 .gif 文件使用了 url-loader 进行处理。limit 选项表示小于 8kb 的图片会被转成 base64 编码输出，大于等于 8kb 的图片则会被输出到指定的目录下。
示例
下面是一个使用 url-loader 加载图片的示例：
-- -------------------- ---- -------
--------- -----
------
------
----------------- ----------
-------
------
---- -------------- ---------- --
------- ------------------------
-------
-------import logo from './logo.png'; const img = new Image(); img.src = logo; document.body.appendChild(img);
在这个示例中，我们使用了 url-loader 将 logo.png 图片转换成了 base64 编码，然后将其作为模块导入，并在页面中动态创建了一个图片元素。
注意事项
- 如果引入的图片文件大小超过了
limit的设置，则会被转换成文件并输出到指定的目录下。 - 如果你的图片路径是相对路径，需要保证和 webpack 配置文件在同一目录下或者使用相对于配置文件的路径。
- 在使用
url-loader时，需要注意打包出的文件大小，不要将过多的图片转换成 base64 编码，否则可能导致打包出的文件体积过大。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/47328