我们的目标是把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. Maven:sun.security.validator.ValidatorException: PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target

    还是记录使用 maven 时遇到的问题. 一.maven报错 maven package 进行打包时出现了以下报错: Non-resolvable parent POM for com.wpbxin: ...

  2. Jquery选择器大全汇总

    一.选择器 1.三个基本选择器,$("#ID") .$(".className")  .$("tagName") 2.其他选择器 //htm ...

  3. RNN、LSTM、Seq2Seq、Attention、Teacher forcing、Skip thought模型总结

    RNN RNN的发源: 单层的神经网络(只有一个细胞,f(wx+b),只有输入,没有输出和hidden state) 多个神经细胞(增加细胞个数和hidden state,hidden是f(wx+b) ...

  4. Java笔记: 初始化块

    Java语言提供了很多类初始化的方法,包括构造器.初始化器等.除了这两种方法之外,我们还可以用初始化块(initialization block)来实现初始化功能. 基本语法 初始化块是出现在类声明中 ...

  5. 15.Pythonic与python杂记

    switcher ={ :'sunday', :'monday', :'thuesday' } day = day_name=switcher.get(day,'Unknow') print(day_ ...

  6. Selenium -- ActionChains().move_by_offset() 卡顿的解决方法

    测试运行时间 运行时间 发现每次0.5秒,此时需要修改默认的时间 打开Python安装目录下的Lib\site-packages\selenium\webdriver\common\actions\p ...

  7. 059、Java中定义一个有参数无返回值的方法

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

  8. 5 GC 参数

  9. delphi中json转dataset

    unit uJSONDB; interface uses SysUtils, Classes, Variants, DB, DBClient, SuperObject, Dialogs; type T ...

  10. hadoop ozone入门

    简介 众所周知,HDFS是大数据存储系统,并在业界得到了广泛的使用.但是无论大集群还是小集群其扩展性都受NameNode的限制,虽然HDFS可以通过Federation进行扩展,但是依然深受小文件和4 ...