我们的目标是把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. HTTP协议调试工具汇总

    前言 本文收集了大量抓包工具,近40款,涵盖了各种开发语言(Java,C#,Delphi,C,C++,Objective-C,Node.js,Go,Python).各类前端(GUI,TUI,CUI,W ...

  2. MySQL部分语法

    MySQL 1.先进入到d盘根目录(自己安装MySQL的盘符) cd d:\2.输入net start mysql3.在d盘的根目录下输入mysql -u root -p就可以进入mysql的命令提示 ...

  3. 084、Java数组之实现数组复制

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  4. DDD-领域驱动设计之领域模型

    DDD领域驱动设计基本理论知识总结 Posted on 2011-10-10 01:01 netfocus 阅读(120434) 评论(82) 编辑 收藏 领域驱动设计之领域模型 加一个导航,关于如何 ...

  5. 题解 P5122 【[USACO18DEC]Fine Dining】

    思路:最短路+dp 1.先跑一遍最短路,计算出没有干草垛最少要多少时间 2.dp求出有干草垛至少需要多少时间,由于dp有后效性,所以用SPFA辅助转移,dp方程和求最短路一模一样,只是先将有干草垛的拉 ...

  6. P1087 有多少不同的值

    P1087 有多少不同的值 转跳点:

  7. 关于C++中vector<vector<int> >的使用

    1.定义 vector<vector<int>> A;//错误的定义方式 vector<vector<int> > A;//正确的定义方式 2.插入元素 ...

  8. oozie的常见错误

    1.变量或路径的英文字母写错,常常是大小写搞混,或者是字母顺序颠倒. 2.本地 oozie_works 工作目录下的文件,如job.properties,workflow.xml等,修改后,忘记上传到 ...

  9. DB2常用sql语句

    转 DB2 提供了关连式资料库的查询语言sql(structured query language),是一种非常口语化.既易学又易懂的语法.此一语言几乎是每个资料库系统都必须提供的,用以表示关连式的操 ...

  10. Compile-kernel-module

    Compile-kernel-module 1. 内核模块编程1.1 简介1.2 加载内核模块1.3 最简单的模块1.4 模块必要信息1.4.1 内核模块必须至少包含的头文件:1.4.2 内核模块必须 ...