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

苏南大叔对本文中描述的事情,存在着疑虑。不过,测试的结果确实达到了目标,但是,苏南大叔觉得可能存在着巧合的因素。大家看这篇文章的时候,也可以本着怀疑的态度看看,还可以在文末给苏南大叔留言。

苏南大叔:webpack4系列教程,withimg-loader 如何处理html中的图片? - webpack-html-img
webpack4系列教程,withimg-loader 如何处理html中的图片?(图6-1)

本文描述的是:webpack@4系列,处理html中的图片路径的方法。上一篇文章中,url-loader处理的是cssjs中的图片路径,但是,它并不处理html中的图片路径。本文中,引入了html-withimg-loader,它可以处理html中的图片路径,并且给html文件引入了很好用的include功能。

本文测试环境:win10node@14.2.0npm@6.14.4webpack@4.43.0mini-css-extract-plugin@0.9.0url-loader@4.1.0html-withimg-loader@0.1.16

安装及配置html-withimg-loader

安装命令如下:

npm i html-withimg-loader -D

配置文件webpack.config.js:

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

配置项目解释

本文中的配置,仅仅是其中一个可能的配置方式,在html-withimg-loader的官方,还有另外的配置方式。下面是苏南大叔的简单说明:

  • html-withimg-loaderhtml-webpack-plugin的配置参数template中加载,在路径前面有html-withimg-loader!字样。
  • url-loader的选项中,增加配置:esModule: false。否则,编译的时候,会报个非常神奇的错误。(很奇怪吧..真的挺奇怪的)
  • url-loader的选项中,不要配置publicPath项目。为css里面的图片,单独配置mini-css-extract-pluginpublicPath。(是不是这里感觉有问题呢?苏南大叔觉得有问题,但是又说不出来...)

苏南大叔:webpack4系列教程,withimg-loader 如何处理html中的图片? - html-img-webpack-config
webpack4系列教程,withimg-loader 如何处理html中的图片?(图6-2)

额外的功能include

这个html-withimg-loaderhtml模板,带来了一个include功能。比较实用。下面的是个使用例子:
index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
    #include("./menu.html")
</body>
</html>

重点是这句话:

#include("./menu.html")

苏南大叔:webpack4系列教程,withimg-loader 如何处理html中的图片? - html-img-webpack-html-include
webpack4系列教程,withimg-loader 如何处理html中的图片?(图6-3)

可能的错误提示

可能存在下面的错误提示信息:

ERROR in   Error: html-webpack-plugin could not minify the generated output.
  In production mode the html minifcation is enabled by default.
  If you are not generating a valid html output please disable it manually.
  You can do so by adding the following setting to your HtmlWebpackPlugin config:
  |
  |    minify: false
  |
  See https://github.com/jantimon/html-webpack-plugin#options for details.
  For parser dedicated bugs please create an issue here:
  https://danielruf.github.io/html-minifier-terser/
  Parse Error: <img src={"default":"img/bg.27cf0.png"} style="width: 300px;height: 300px"><script src="js/app.d1662b96.b  undle.js"></script><script src="js/main.d1662b96.bundle.js"></script></body></html>

这个错误提示,就需要修改配置项目,url-loader的选项,esModule: false。是不是觉得很奇怪?有点头疼医脚的感觉。

苏南大叔:webpack4系列教程,withimg-loader 如何处理html中的图片? - html-img-webpack-html-error
webpack4系列教程,withimg-loader 如何处理html中的图片?(图6-4)

苏南大叔:webpack4系列教程,withimg-loader 如何处理html中的图片? - html-img-webpack-config-2
webpack4系列教程,withimg-loader 如何处理html中的图片?(图6-5)

另外,使用html-withimg-loader之后,html-webpack-plugin原本的<%= %>功能,全部失效,这是个悲伤的故事。

苏南大叔:webpack4系列教程,withimg-loader 如何处理html中的图片? - html-withimg-loader-bug
webpack4系列教程,withimg-loader 如何处理html中的图片?(图6-6)

相关链接

这篇文章,苏南大叔写的过程中,觉得疑点还是重重的。所以,大家可以来官方的文档看看,是不是有更好的解决方案呢?

下面的是苏南大叔的几篇文章:

总结

说实话,配置这个webpack是挺难的。本来就是写个html页面,挺容易的一件事,让webpack接管后,就变得挺难的了。不知道读者你是不是也有类似的感觉呢?苏南大叔的结论是:不建议使用html-withimg-loader。虽然可以解决一些问题,但是也出现了一些新的问题,似乎并不是太正确的选择。

更多苏南大叔的webpack相关经验文章,可以在下面的链接中找到:

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   webpack