在前端开发中，我们经常会遇到需要将图片内联到 HTML、CSS 或者 JS 中的情况。这种做法可以减少 HTTP 请求次数，进而提高页面加载速度，优化用户体验。但是手动内联十分麻烦并且容易出错，于是出现了一些自动化工具，比如我们今天要介绍的 npm 包：@zumwald/html-webpack-inline-img-plugin。
安装
在使用 @zumwald/html-webpack-inline-img-plugin 之前，我们需要先安装它。可以使用 npm 安装：
npm install --save-dev @zumwald/html-webpack-inline-img-plugin
使用
在 webpack 配置文件中添加 @zumwald/html-webpack-inline-img-plugin 的配置项：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- -------------------------- - ---------------------------------------------------
-------------- - -
-- ---
-------- -
--- -------------------
--------- -------------------
-- ---
---
--- ----------------------------
-- -------------
--
-
-可以看到，我们在使用 @zumwald/html-webpack-inline-img-plugin 的同时，还使用了 HtmlWebpackPlugin 来自动生成 HTML 文件。
我们可以通过以下配置项来控制 @zumwald/html-webpack-inline-img-plugin 的行为：
maxSize
内联的图片大小的最大值。该值的单位是字节，默认值是 8k。
ignore
一个正则表达式，匹配到的图片会被跳过不会被内联。比如：
new HtmlWebpackInlineImgPlugin({
ignore: /favicon\.png/
})fallback
当文件太大或者文件的地址（url）不正确时的替代图片。比如：
new HtmlWebpackInlineImgPlugin({
fallback: './assets/image-not-found.png'
})rootPath
指定图片的根路径。比如：
new HtmlWebpackInlineImgPlugin({
rootPath: __dirname + '/src'
});loader
当你不需要内联所有图片的时候，可以使用该选项指定某个 loader 用于对满足指定规则的图片进行内联。比如：
new HtmlWebpackInlineImgPlugin({
loader: 'url-loader'
})示例
我们来看个完整的示例，假设我们要将 ./src/index.html 中所有小于 2k 大小的图片内联到 HTML 中：
webpack.config.js:
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- -------------------------- - ---------------------------------------------------
-------------- - -
------ -----------------
------- -
----- --------- - --------
--------- ----------
--
----- --------------
-------- ------
-------- -
--- -------------------
--------- ------------------
---
--- ----------------------------
-------- ----
--
-
-src/index.html:
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ---------------------- ------- ------ ---- ------------------------- ------- ---- ----------------------- ------- ------- -------
src/assets/avatar.jpg：
文件大小为 976KB
src/assets/logo.png：
文件大小为 1.1KB
经过 webpack 打包后，我们会得到一个 dist/index.html 文件，其内容如下：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ---------------------- ------- ------ ---- ------------------------------------------------------------ ------- ---- ----------------------- ------- ------- -------
可以看到，webpack 自动将 avatar.jpg 内联到了 HTML 中，logo.png 则没有内联。
总结
@zumwald/html-webpack-inline-img-plugin 是一个快速、易于配置的 webpack 插件，可以帮助我们将小图片内联到 HTML 中，从而提高页面加载速度。通过简单的示例，我们可以看到它的用法相当容易上手，非常适合用来优化项目。
如果您在使用中遇到了问题，请查看官方文档 https://github.com/zumwald/html-webpack-inline-img-plugin，里面包含了详细的 API 文档和示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fea81e8991b448dd994