webpack4系列教程，如何更优美的处理html中的图片？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

大家好，苏南大叔在本文中，是来做另外一个webpack@4系列教程的。主题依然是处理html中的图片，为什么和上一篇文章的主题类似呢？因为苏南大叔觉得上边那篇文章的loader写的不是太好。虽然符合文章的要求，但是总是觉得不放心。所以，继续安利另外一个loader。也就是本文的主角：html-loader。

本文测试环境：win10、node@14.2.0、npm@6.14.4、webpack@4.43.0、url-loader@4.1.0、html-loader@1.1.0。本文的主要目的，还是使用html-loader处理html中的图片，但是存在着一些不同的地方，到底是什么原因，让苏南大叔再写这个处理图片的话题呢？

特殊的图片属性

在html中，大部分的图片，不是以css的背景图出现，就是以img的src属性出现。这些是最常见的情况。但是也有特别的属性出现的图片，比如：video标签的poster属性，其实也是一个图片。这个属性用html-withimg-loader来处理的话，就是完全不能处理的。所以，这里，苏南大叔介绍的是这个更智能的loader：html-loader。

<video poster="../src/bg2.png">
   <!--<source src="../src/1.mp4">-->
</video>

html-loader的优势就是：可以识别那些非常见场合的图片，并进行转换。在其github的主页上，有更多支持的特殊属性。链接见这里：

• https://github.com/webpack-contrib/html-loader

html-loader支持的特殊属性有：

the src attribute of the audio tag
the src attribute of the embed tag
the src attribute of the img tag
the srcset attribute of the img tag
the src attribute of the input tag
the href attribute of the link tag (only for stylesheets)
the data attribute of the object tag
the src attribute of the script tag
the src attribute of the source tag
the srcset attribute of the source tag
the src attribute of the track tag
the poster attribute of the video tag
the src attribute of the video tag

其实可以看到，这些特殊属性，也不一定是图片，可以是其他的文件，比如：mp4。但是，这是后话。

安装命令如下：

npm i html-loader -D

配置项目

官方推荐的配置项目是这样的：
webpack.config.js:

//...
module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: 'html-loader',
        options: {
          // Disables attributes processing
          attributes: false,
        },
      },
    ],
  },
};

但是，苏南大叔是配合html-webpack-plugin使用的，所以，配置是这么写的：
webpack.config.js:

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
//...
module.exports = {
    mode: 'production', // 环境
    entry: {
        //...
    },
    output: {
        filename: 'js/[name].[hash:8].bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
        //...
        new HtmlWebpackPlugin({
            template: "html-loader!./html/index.html", // 根据 目标文件生成 html
            //...
        }),
    ],
    //...
    module: {
        rules: [
            //...
            {
                test: /\.(png|jpg|gif|jpeg|svg)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            name: "[name].[hash:5].[ext]",
                            limit: 1024, // size <= 1kib
                            outputPath: "img",
                        }
                    }
                ]
            }
        ]
    },
}

重点就是：html-webpack-plugin的配置中，template属性中，增加了html-loader!字样。

template: "html-loader!./html/index.html"

效果展示

因为苏南大叔演示的是video的poster属性图片，所以，处理前的html文件代码如下：

<video poster="../src/bg2.png" preload="none" controls="controls" data-scale="2.3">
</video>

经过html-loader!处理后的html，代码如下：

<video poster="../src/bg2.png" preload="none" controls="controls" data-scale="2.3">
</video>

基本上符合要求，测试通过。另外，值得一提的是：html-loader，不光处理img，也处理其他文件，例如video的src属性，里面的.mp4文件。记得配置.mp4文件关联到url-loader即可，html-loader会处理后续的事情。

存在的问题

• 这个html-loader不允许src空属性，否则会报错... 真心有点多管闲事了。
• 这个html-loader没有html-withimg-loader的include能力。
• 这里有个似乎不可调和的矛盾，html-loader也和html-plugin冲突，使用了html-loader之后，html-plugin就失去了识别<%= %>的能力。

相关链接

• https://github.com/webpack-contrib/html-loader
• https://newsn.net/say/webpack-plugin-html.html
• https://newsn.net/say/webpack-start.html

总结

html-loader支持的属性多，但是也并不是完美无缺的。html-withimg-loader也是有点优势的。but，苏南大叔推荐您使用html-loader。关于html-loader，苏南大叔列举出来的几个问题，都是可以解决的。

所以，在文章的最后，苏南大叔强烈推荐您查看苏南大叔的webpack系列文章：

• https://newsn.net/tag/webpack/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。