快速实现html页面结构图,基于webpack实现多html页面开发框架八 html引入图片打包和公共页面模块复用...

一、解决什么问题

1、html中img引入的图片地址没有被替换,找不到图片

2、html公共部分复用问题,如头部、底部、浮动层等

二、html中img引入图片问题解决

1、在index.html插入img,引用图片test.jpeg

2、npm run dev运行结果如下:

6bbdb0d8a7a190036aeb1ba7329548eb.png

因为图片地址没有被替换为打包后的地址, 所以找不到图片

3、需要使用的包:html-withimg-loader,安装命令:npm install html-withimg-loader --save-dev

在module的rules增加loader配置,配置如下:

1 {

test: /\.html$/,

// html中的img标签

use: ["html-withimg-loader"]

},

4、重新运行项目,效果如下:

8b7212189eed49e8f37598dc649a78a9.png

html中图片地址被替换为打包后的地址, 图片正常显示

三、html公共模块复用问题解决

1、比如我们现在有公共头部header.html、bottom.html如何引用到各个页面,我们先在项目中把文件建出来,如下:

bd35ba141e981f2099f42cb8a77f8e8f.png

新建layout文件夹,里面包含header.html和bottom.html,两个文件的内容可以随便写下额

2、以前我们只能把内容来回拷贝,修改的时候修改N处,非常麻烦,还容易少改几处

3、现在我们怎样引用,方式如下:

7c80da672666b15f09d1ee1d2add58d6.png

只需要#include引用文件的相对地址,即可把文件引用进来,npm run dev运行效果如下:

ead621d7218608c3a4ab8dbdaac432d3.png

3、为什么#include就可以实现呢,也是受益于html-withimg-loader,当这个loader运行的时候,遇到#include,会把页面的内容可拷贝到对应位置

三、html公共模块的js和样式文件写在什么位置

1、pages下公共模块文件夹不能包含.js文件和样式文件,因为有.js文件会走打包流程,会生成页面,而我们公共模块是不需要生成页面的。

2、可以运行npm run build,查看是否生成了layout,效果如下:

420c1e653d7a918d1e97dcefeacb8587.png

2、公共模块的js、css应该放在那里,js放到assets/js,css放到assets/css,如下:

fc994509ade2be37f7a278d82d90d11a.png

header.js和header.scss在各业务页面的.js文件的头部引入就可以使用,如下:

8750a48b40b1010e457e417236fb5360.png

截图:在首页的index.js文件中引入了common.scss和header.js,修改了header.html中文本的样式,输出了header字符,运行效果如下:

5e41acb990d052597c2307a52994b272.png

写的不对之处请大家批评指正~~~~!!!!!!

文章原创,转载请注明出处,谢谢!

b739ec46bb5c46d9c0aa4ce35ba1ea56.png

关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。

[基于webpack实现多html页面开发框架八 html引入图片打包和公共页面模块复用]http://www.zyiz.net/tech/detail-96823.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值