TypeScript 文件引入 Html (ts import html webpack)
我们的目标是把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)的更多相关文章
- CSS文件引入link和@import 区别
1.(本质区别)link 属于 HTML 标签,而 @import 完全是 css 提供的一种导入 css 文件的规则. 2.文件加载时机有差别: 当一个页面被加载的时候,link 引用的 css 会 ...
- vue脚手架使用swiper /引入js文件/引入css文件
1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...
- vue cli搭建项目及文件引入
cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载 ...
- vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件
vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...
- route按需加载的3种方式:vue异步组件、es提案的import()、webpack的require.ensure()
1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件.举例如下: { path: '/promisedemo' ...
- SPRING IN ACTION 第4版笔记-第二章WIRING BEANS-008-在Java配置文件中引入xml配置文件@Import、@ImportResource
1. package soundsystem; import org.springframework.beans.factory.annotation.Autowired; public class ...
- html文件引入其它html文件的几种方法:include方式
可以在一个html的文件当中读取另一个html文件的内容吗?答案是确定的,而且方法不只一种,在以前我只会使用iframe来引用,后来发现了另外的几种方法,那今天就总结这几种方法让大家参考一下. 1.I ...
- flask 安装及基础学习(url_for反转,静态文件引入)
pip3 install flask pycharm 创建项目 默认的代码解释说明(及开启debug模式) #encoding:utf-8 from flask import Flask #从flas ...
- 在vscode上 运行typescript 文件
安装nodejs 安装链接: https://nodejs.org/zh-cn/ 安装测试: node -v npm -v 安装typescript sudo npm install typescri ...
随机推荐
- 基于zedboard的DMA设计笔记
2.BAR0空间的概念:BAR(Base Address Register ) 该组寄存器简称为BAR寄存器,BAR寄存器保存PCI设备使用的地址空间的基地址,该基地址保存的是该设备在PCI总线域中的 ...
- Linux centos7 awk工具
一.awk介绍 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk含盖sed所有功能,把文件逐行的读入,以空格为默认分隔 ...
- SystemVerilog基本语法总结(下)
2018年IC设计企业笔试题解析-(验证方向) 1.请简述:定宽数组,动态数组,关联数组,队列四种数据类型的各自特点.解析:(1)定宽数组:其宽度在声明的时候就指定了,故其宽度在编译时就确定了.(2) ...
- SystemVerilog基本语法总结(上)
SystemVerilog基本语法总结(上) 在总结SV的语法之前,先分享一些关于SV的笔试题目,这样更显得具有针对性的总结. a. 验证中,代码覆盖率是指(衡量哪些设计代码在激活触发,而哪一些则一直 ...
- 如何配置nginx
Nginx安装手册 1 nginx安装环境 nginx是C语言开发,建议在linux上运行,本教程使用Centos6.5作为安装环境. n gcc 安装nginx需要先将官网下载的源码进行编译,编译 ...
- php 等于不等于 一个感叹号两个等于号
$a == $b 等于 TRUE,如果 $a 等于 $b. $a === $b 全等 TRUE,如果 $a 等于 $b,并且它们的类型也相同.(PHP 4 引进) $a != $b 不等 TRUE,如 ...
- Day1-Luogu-2085
题目描述 有n个函数,分别为F1,F2,...,Fn.定义Fi(x)=Ai*x^2+Bi*x+Ci (x∈N*).给定这些Ai.Bi和Ci,请求出所有函数的所有函数值中最小的m个(如有重复的要输出多个 ...
- css限制文字显示字数长度,超出部分自动用省略号显示,防止溢出到第二行
为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字.这在列表条目,题目,名称等地方常用到. 效果如下: 未限制显示长度,如果超出了会溢出到第二行里.严重影响用户体验和显示效果. 我们在 ...
- centos 下yum 安装nginx
centos 下yum 安装nginx 1. 直接yum install nginx不行,要先处理下源: rpm -ivh http://nginx.org/packages/centos/6/noa ...
- 创建用户(adduser和useradd)和删除用户(userdel)及
一 用户创建命令: # adduser 用户名 # useradd 用户名 1) useradd 与 adduser 的区别 在CentOs系统中: useradd与adduser是没有区别的, ...