webpack使用html-loader加载js中引入的html资源

• 一、如何使用html-loader
• 二、html-loader配置

一、如何使用html-loader

安装

yarn add html-loader --dev

配置webpack.config.js

module.exports = {
   	..., // 其他配置
    module:{
        rules:[
        	{
                test:/.html$/,
                use:{
                    loader:"html-loader"
                }
            }
        ]
    }
}
           

image.html内容如下：

<div>
    <img src="../images/icon.png" alt="">
    <a href="../images/img.jpg" alt="">this is a tag</a>
</div>
           

打包入口文件index.js

import imageHtml from './image.html' 
//html文件默认会将html代码作为字符串导出，所以我们需要接收导出的字符串

document.write(imageHtml)
           

只有在打包的js文件中引入的html才会在打包时被加载到，从而分配html-loader去进行处理。

执行

yarn webpack

打包，启动服务器查看应用控制台。

可见，html中的img标签使用的图片被检测到了，然后将其使用url-loader去进行了处理，上面的配置中没有关于url-loader的配置，想了解的读者可以点击这里查看。

a标签的href属性中的图片资源没被检测到，因为a标签的href属性默认是不在html-loader的检测范围内的，所以我们需要将其添加上去。

二、html-loader配置

配置webpack.config.js

module.exports = {
   	..., // 其他配置
    module:{
        rules:[
        	{
                test:/.html$/,
                use:{
                    loader:"html-loader",
                    options:{
                    	// html-loader 0.x 配置
                    	// attrs:['img:src','a:href']
                    	
                    	// html-loader 1.x 配置
                    	list:[
                    		"...",// 所有默认支持的标签和属性，这个一定要加上，不然就只会检测a标签了
                    		{
                    			tag:"a",
                    			attribute: 'href',
                                type: 'src'
                    		}
                    	]
                    }
                }
            }
        ]
    }
}
           

再次执行打包

yarn webpack

，查看效果。

引用的图片资源都成功转换了。