我们的目标是把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. python类的对象使用

    class student():    def __init__(self,age,sex):        self.age = age        self.sex = sex  #self._ ...

  2. clientDataSet转换sql

    ReadMe 新版本delphi,可以用string类型,旧版本需要用widestring =========================================== function T ...

  3. SChema 多个属性的设置学习

    <?xml version="1.0" encoding="UTF-8"?> <xs:schema xmlns:xs="http:/ ...

  4. HihoCoder第五周:标准动态规划

    这周的题目是最标准最简单的动态规划了,自己一直以来对动态规划都不是很理解,这次也是好好记录一下. 题目1 :数字三角形 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 问题描述 ...

  5. python 数据处理 对csv文件进行数据处理

    数据如下图: 用python对数据进行处理: #读取csv文件内容并进行数据处理 import os import csv import datetime import re from itertoo ...

  6. 云时代架构阅读笔记十六——Hystrix理解

    背景 分布式系统环境下,服务间类似依赖非常常见,一个业务调用通常依赖多个基础服务.如下图,对于同步调用,当库存服务不可用时,商品服务请求线程被阻塞,当有大批量请求调用库存服务时,最终可能导致整个商品服 ...

  7. 012、Java中发生溢出的转换问题

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

  8. json字符串转java对象,json中字段名称与对象属性名称不一致

    json字符串转java对象,json字段名称与对象属性名称不一致可以在对象属性上添加注解@SerializedName解决

  9. 安卓Recycleview简单的网格布局-初学者的关键点

    导包 def supportVersion = '28.0.0' 定义常量我的sdk版本为28 implementation "com.android.support:recyclervie ...

  10. PHPmyadmin Getshell(10.25 第二十七天)

    PHPmyadmin Getshell的方法(1)show global variables like '% secure-file-priv%' 如果该参数设置为空或者指定的文件夹可以利用,然后写木 ...