文档章节

typescript中加载img

洋碱
 洋碱
发布于 2017/08/29 21:35
字数 212
阅读 39
收藏 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,差不多就是这样了

© 著作权归作者所有

共有 人打赏支持
洋碱

洋碱

粉丝 3
博文 64
码字总数 22077
作品 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系列1-简介及版本新特性

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

一配
2015/08/15
0
0
TypeScript 模块导入那些事

ES6 模块导入的限制 我们先来看一个具体的例子: 在 Node 项目里,使用 CommonJS 规范引入一个模块: 改写为 TypeScript(1.5+ 版本)时,通常有两种方式: 使用 ES6 模块导入方式: 使用 Ty...

三毛丶
06/11
0
0
TypeScript系列 - 什么是TypeScript

看了很多关于TypeScript的文章,总体说来没有很好的,一个系统的学习TypeScript的资源。 接下来,我将给大家带来TypeScript的系列,让你和我一样,一步一步的学习TypeScript,并且学以致用。...

Hongten
08/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 鱼生不值得

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @瘟神灬念:分享新裤子的单曲《没有理想的人不伤心 (Remix版)》: 《没有理想的人不伤心 (Remix版)》- 新裤子 手机党少年们想听歌,请使劲儿戳...

小小编辑
45分钟前
45
7
arts-week10

Algorithm 905. Sort Array By Parity - LeetCode Review Who’s Afraid of the Big Bad Preloader? 一文读懂前端缓存 一个网络请求3个步骤:请求,处理,响应,而前端缓存主要在请求处响应这两步...

yysue
今天
5
0
00.编译OpenJDK-8u40的整个过程

前言 历经2天的折腾总算把OpenJDK给编译成功了,要说为啥搞这个,还得从面试说起,最近出去面试经常被问到JVM的相关东西,总感觉自己以前学的太浅薄,所以回来就打算深入学习,目标把《深入理...

凌晨一点
今天
6
1
python: 一些关于元组的碎碎念

初始化元组的时候,尤其是元组里面只有一个元素的时候,会出现一些很蛋疼的情况: def checkContentAndType(obj): print(obj) print(type(obj))if __name__=="__main__": tu...

Oh_really
昨天
7
2
jvm crash分析工具

介绍一款非常好用的jvm crash分析工具,当jvm挂掉时,会产生hs_err_pid.log。里面记录了jvm当时的运行状态以及错误信息,但是内容量比较庞大,不好分析。所以我们要借助工具来帮我们。 Cras...

xpbob
昨天
195
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部