介绍
在前端开发中，有时我们需要在 CSS 文件中引用图片。而使用相对路径引用图片可能会导致图片加载不出来，影响用户体验。为了解决这个问题，我们通常会使用图片转为 base64 编码，然后将编码后的字符串直接写入 CSS 中。这样做的好处是可以减少 HTTP 请求次数，提高页面加载速度。但是，手动编码图片是一件非常繁琐的事情，特别是对于大量的图片和复杂的 CSS 样式。
现在，有一个 npm 包叫做 base-css-image-loader 可以帮助我们自动将 CSS 中的图片转为 base64 编码，进而提供优化的 CSS 文件。通过使用该 npm 包，我们可以让项目的样式表更加简明、轻量，并提升页面的加载速度。
安装
通过 npm 安装 base-css-image-loader：
npm i -D base-css-image-loader
使用方法
在 webpack 中，我们可以使用 base-css-image-loader 对 CSS 中的图片进行编码。这里我们将 CSS 文件与图片文件放在同一目录下，然后对该目录中所有的 CSS 文件进行编译。
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- ---------------- ------------- -------------------------
--
--
--
--在使用 base-css-image-loader 时，我们需要注意以下几点：
- 只有在 CSS 中使用相对路径引用图片时，才能使用 base-css-image-loader 进行编码。
base-css-image-loader必须在css-loader之后使用，因为该 loader 只能处理 CSS 文件，需要先将 CSS 文件编译成 JavaScript，再进行处理。- 由于编码图片会使 CSS 文件变得更大，因此建议只对较小的图片（如小于 10KB）使用该 loader。
示例
index.css:
body {
background-image: url('./bg.png');
}编译后的 index.css:
body {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAACXBIWXMAAAsTAAALEwEAmpwYAAABmUlEQVQY0y3RsYsDQRSF4d/A6zA68GBgMaoA00ApcGnAG2QHVgHNgLkA7WBuAeOSJTfARxlfTpz9vI2D4qdq3aJkn4a+LlYF7sMqFB3DzjnMhSHSC8JvMAnk032hkF/HCojpuWc0hNKv2JzC0o5rq+FCN1X8RUvksN0p5eD+RGbViJ/U8/ww5oC5sfzLgLRQAAAABJRU5ErkJggg==');
}结论
通过使用 base-css-image-loader，我们可以自动将 CSS 文件中的图片转为 base64 编码，避免了手动编码的繁琐过程，减少 HTTP 请求，从而提高网页的加载速度。如果您的项目中有大量 CSS 文件中引用的图片，建议尝试使用该 npm 包进行优化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66270