文档章节

typescript中加载img

洋碱
 洋碱
发布于 2017/08/29 21:35
字数 212
阅读 53
收藏 0

在html标签中使用了img需要引用图片,需要将图片打包到输出目录,研究了很久,因为不熟悉webpack 也不熟悉typescript,因此花了很多天才搞定。

1、需要加载img文件需要使用url-loader,url-loader依赖file-loader

# 仅在编译中使用--save-dev
npm install file-loader --save-dev
npm install url-loader --save -dev

安装完成后:

2、完成后需要配置webpack的打包输出文件,在对应的webpack.config.js的module中添加如下代码

3、文件被hash处理,如果到这一步这样就比较适合,如果不行就需要另外处理使用html-withimg-loader

npm install html-withimg-loader --save-dev

对应的webpack.config.js的module中添加如下代码

 test: /\.(htm|html)$/,
 loader: 'html-withimg-loader'

文件结构如下

OK,差不多就是这样了

© 著作权归作者所有

共有 人打赏支持
下一篇: 关于npm install
洋碱

洋碱

粉丝 3
博文 65
码字总数 26002
作品 0
广州
高级程序员
私信 提问
TypeScript开发系列(二)——VS让普通工程自动编译TypeScript

在用Visual Studio 开发TypeScript时,如此系列(一)中所做的那样,只有创建一个Type Application 工程,在此工程中添加的.ts(TypeScript文件格式)脚本在编译时才会自动被编译。如果我们想要...

lhan
2013/01/09
0
0
TypeScript VS JavaScript 深度对比

TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言,我们已经熟知 TypeScript 是 JavaScript 的一个超集,但是 TypeScript 与 JavaScript 之间又有什么样的区别呢?在选择开...

powertoolsteam
06/29
0
0
TypeScript 入门指南

你是否听过 TypeScript? TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行。TypeScript与JavaScript相比进 步的地方 包括:加入注释...

彭博
2012/11/27
948
0
TypeScript 入门指南

你是否听过 TypeScript? TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行。TypeScript与JavaScript相比进步的地方 包括:加入注释,...

红薯
2012/10/07
64.6K
35
TypeScript系列1-简介及版本新特性

简介 随着PC端快速向移动端迁移,移动(体验)优先的概念也越来越响。由于ReactJS目前移动端仅仅支持iOS,因此移动端Web开发框架只能选择: AngularJS/Angula2 + Ionic框架 + Cordova。想要学...

一配
2015/08/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

jquery通过id显示隐藏

var $div3 = $('#div3'); 显示 $div3.show(); 隐藏 $div3.hide();

yan_liu
今天
3
0
《乱世佳人》读书笔记及相关感悟3900字

《乱世佳人》读书笔记及相关感悟3900字: 之前一直听「荔枝」,后来不知怎的转向了「喜马拉雅」,一听就是三年。上班的时候听房产,买房了以后听装修,兴之所至时听旅行,分手后听亲密关系,...

原创小博客
今天
3
0
大数据教程(9.6)map端join实现

上一篇文章讲了mapreduce配合实现join,本节博主将讲述在map端的join实现; 一、需求 实现两个“表”的join操作,其中一个表数据量小,一个表很大,这种场景在实际中非常常见,比如“订单日志...

em_aaron
今天
3
0
cookie与session详解

session与cookie是什么? session与cookie属于一种会话控制技术.常用在身份识别,登录验证,数据传输等.举个例子,就像我们去超市买东西结账的时候,我们要拿出我们的会员卡才会获取优惠.这时...

士兵7
今天
3
0
十万个为什么之为什么大家都说dubbo

Dubbo是什么? 使用背景 dubbo为什么这么流行, 为什么大家都这么喜欢用dubbo; 通过了解分布式开发了解到, 为适应访问量暴增,业务拆分后, 子应用部署在多台服务器上,而多台服务器通过可以通过d...

尾生
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部