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

最新推荐文章于 2021-11-02 08:53:46 发布

yzbben

最新推荐文章于 2021-11-02 08:53:46 发布

阅读量1.1w

点赞数

分类专栏： webpack

webpack 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

yzbben

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack 处理html中img的src引入的图片

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

扫一扫

专栏目录