我们的目标是把html引入ts文件,webpack打包时就能把html打进js文件,减少文件加载啦

1 安装 text-loader

npm install text-loader --save-dev

2 webpack 配置里新增 text-loader 为文本加载器

module: {
rules: [
{
   test: /\.html$/,
   use: 'raw-loader',
}
]

新建文件 命名为 typings.d.ts, 这样TypeScript文件里就可把Html引入为字符串模块了

 declare module "*.html" {
const content: string;
export default content;
}

4 在 TypeScript 里引入html

import prompt from '../../dom/Prompt.html';(这里写html文件的相对路径)
console.log( prompt ) ;

TypeScript 文件引入 Html (ts import html webpack)的更多相关文章

  1. CSS文件引入link和@import 区别

    1.(本质区别)link 属于 HTML 标签,而 @import 完全是 css 提供的一种导入 css 文件的规则. 2.文件加载时机有差别: 当一个页面被加载的时候,link 引用的 css 会 ...

  2. vue脚手架使用swiper /引入js文件/引入css文件

    1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...

  3. vue cli搭建项目及文件引入

    cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载 ...

  4. vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

    vue引入swiper  vue使用swiper  vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...

  5. route按需加载的3种方式:vue异步组件、es提案的import()、webpack的require.ensure()

    1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件.举例如下: { path: '/promisedemo' ...

  6. SPRING IN ACTION 第4版笔记-第二章WIRING BEANS-008-在Java配置文件中引入xml配置文件@Import、@ImportResource

    1. package soundsystem; import org.springframework.beans.factory.annotation.Autowired; public class ...

  7. html文件引入其它html文件的几种方法:include方式

    可以在一个html的文件当中读取另一个html文件的内容吗?答案是确定的,而且方法不只一种,在以前我只会使用iframe来引用,后来发现了另外的几种方法,那今天就总结这几种方法让大家参考一下. 1.I ...

  8. flask 安装及基础学习(url_for反转,静态文件引入)

    pip3 install flask pycharm 创建项目 默认的代码解释说明(及开启debug模式) #encoding:utf-8 from flask import Flask #从flas ...

  9. 在vscode上 运行typescript 文件

    安装nodejs 安装链接: https://nodejs.org/zh-cn/ 安装测试: node -v npm -v 安装typescript sudo npm install typescri ...

随机推荐

  1. 基于zedboard的DMA设计笔记

    2.BAR0空间的概念:BAR(Base Address Register ) 该组寄存器简称为BAR寄存器,BAR寄存器保存PCI设备使用的地址空间的基地址,该基地址保存的是该设备在PCI总线域中的 ...

  2. Linux centos7 awk工具

    一.awk介绍 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk含盖sed所有功能,把文件逐行的读入,以空格为默认分隔 ...

  3. SystemVerilog基本语法总结(下)

    2018年IC设计企业笔试题解析-(验证方向) 1.请简述:定宽数组,动态数组,关联数组,队列四种数据类型的各自特点.解析:(1)定宽数组:其宽度在声明的时候就指定了,故其宽度在编译时就确定了.(2) ...

  4. SystemVerilog基本语法总结(上)

    SystemVerilog基本语法总结(上) 在总结SV的语法之前,先分享一些关于SV的笔试题目,这样更显得具有针对性的总结. a. 验证中,代码覆盖率是指(衡量哪些设计代码在激活触发,而哪一些则一直 ...

  5. 如何配置nginx

    Nginx安装手册 1 nginx安装环境 nginx是C语言开发,建议在linux上运行,本教程使用Centos6.5作为安装环境. n  gcc 安装nginx需要先将官网下载的源码进行编译,编译 ...

  6. php 等于不等于 一个感叹号两个等于号

    $a == $b 等于 TRUE,如果 $a 等于 $b. $a === $b 全等 TRUE,如果 $a 等于 $b,并且它们的类型也相同.(PHP 4 引进) $a != $b 不等 TRUE,如 ...

  7. Day1-Luogu-2085

    题目描述 有n个函数,分别为F1,F2,...,Fn.定义Fi(x)=Ai*x^2+Bi*x+Ci (x∈N*).给定这些Ai.Bi和Ci,请求出所有函数的所有函数值中最小的m个(如有重复的要输出多个 ...

  8. css限制文字显示字数长度,超出部分自动用省略号显示,防止溢出到第二行

    为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字.这在列表条目,题目,名称等地方常用到. 效果如下: 未限制显示长度,如果超出了会溢出到第二行里.严重影响用户体验和显示效果. 我们在 ...

  9. centos 下yum 安装nginx

    centos 下yum 安装nginx 1. 直接yum install nginx不行,要先处理下源: rpm -ivh http://nginx.org/packages/centos/6/noa ...

  10. 创建用户(adduser和useradd)和删除用户(userdel)及

    一  用户创建命令: # adduser  用户名 # useradd  用户名 1) useradd 与 adduser 的区别 在CentOs系统中: useradd与adduser是没有区别的, ...