我们的目标是把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. JS中的鼠标移入移除监控操作

    有些时候我们需要通过页面来监控用户的行为,包括鼠标操作键盘操作,本文章介绍的是鼠标的操作监控: <script> window.onload = function(){ var oDiv ...

  2. centos7-django(python3)环境搭建

    最小化安装centos7 安装epel-release 安装python34 安装pip3 通过pip3安装django 坑 epel(extra package for enterprise lin ...

  3. Spring事务服务

    Spring事务服务 (2013-07-22 11:13:36) 转载▼ 标签: 事务管理 ssh 分类: Sping Spring为事务管理提供了一流的支持.同时支持编程式事务和声明式事务.无论是编 ...

  4. JavaScript 字符编码

    JavaScript 字符编码 JavaScript 遵循 Unicode 字符编码规则.Unicode 字符集中每个字符使用 2 个字节来表示,这意味着用户可以使用中文来命名 Java)Script ...

  5. arm linux 移植 python3.6

    背景: 人生苦短,我用Python. 说明: 编译Python的嵌入式版需要解释器解析setup.py从而编译Python的模块,因此需要先编译出host的解释器.(有点像Go语言) Python : ...

  6. P1090 危险品装箱

    1090 危险品装箱 (25分)   集装箱运输货物时,我们必须特别小心,不能把不相容的货物装在一只箱子里.比如氧化剂绝对不能跟易燃液体同箱,否则很容易造成爆炸. 本题给定一张不相容物品的清单,需要你 ...

  7. Element 以二进制的形式 自定义上传图片

    一,只有在上传文件之前的钩子函数中才可以获得最初的文件(文件本身的二进制形式),用以以上传服务器. 还需要使用formdata来承载数据,便于接收 <template>   <div ...

  8. WEB-INF

    WEB-INF下的内容是没有办法通过浏览器去请求的.可以把东西放在WEB-INF下面,避免用户直接通过浏览器请求.那些资源只允许通过url请求过来通过其他途径转发给用户. 比如WEB-INF/jsp/ ...

  9. 手把手教你如何玩转CLion

    声明:配置是基于CLion的2019.1版本 〇.CLion简介 一.安装 \(JetBrains\)官方下载地址:CLion2019.3 百度网盘:CLion2019.1 个人觉得还是2019.1版 ...

  10. 三十二、CI框架之配置域名和设置默认登陆网站

    一.打开routes.php文件,将$route['default_controller'] = 'login'; 修改成我们需要的内容. 二.修改config.php中的base_url数据 三.L ...