webpack 处理html中img的src引入的图片

来源：互联网发布：ubuntu安装软件的命令编辑：程序博客网时间：2024/05/31 19:10

webpack在管理模块，处理各种资源上都是无往不利，但唯独在处理html上比较困难，不识别html中img标签src引入的图片。
html-webpack-plugin这种插件辅助处理html非常好，但却仍然未解决html代码中的图片问题，未免美中不足。在遍寻开源模块无果后，认真研究webpack的loader和plugin后，终于解决了这个问题。

从npm安装模块

npm i html-withimg-loader --save

使用：

var html = require('html-withimg-loader!./xxx.html');

xxx.html代码：

<!DOCTYPE html><html><head>#include("./layout/layout.html")<title>示例页面</title></head><body><script type="text/template">    <div>dfde</div></script><img id='test2' src='images/logo.gif' /><img id="test1" src="./images/test4.jpg" />#include("./layout/scripts.html")</body></html>

编译结果为：

<!DOCTYPE html><html><head><meta name="description" content=""><meta name="keywords" content=""><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>示例页面</title></head><body><script type="text/template">    <div>dfde</div></script><img id='test2' src="/__build/images/logo_f7b644e2086e41139fa132fd229450f4.gif" /><img id="test1" src="/__build/images/test4_df538a9696eb4c032286f7f6bc0d1708.jpg" /><script src="https://static.yiji.com/resource/lib/jquery/1.7.2/jquery.min.js"></script></body></html>

img标签的路径会被url-loader处理，并且资源被添加到依赖，webpack会按照url-loader配置进行打包
细心的朋友应该注意到源码里面有两句#include的语法，没错，模块额外支持了include加载子页面的功能~

那进一步的需求，在入口html页面中也想享受这个功能怎么办呢？很简单，结合html-webpack-plugin就可以了

plugins: [    new HtmlWebpackPlugin({        template: 'html-withimg-loader!' + path.resolve(srcDir, filename),        filename: filename    }),]

然后浏览器中输入地址的时候记得加上_build目录，这里的html才是编译过的，很多新手不知道这个，注意一下，如：

127.0.0.1:3001/__build/xxx.html

然后就看到正确的页面了！

希望能帮到大家，如果模块有问题，请务必告知以便修复，项目主页：https://github.com/wzsxyz/html-withimg-loader

0 0