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 ...
随机推荐
- eclipse安装SVN插件的两种方法
eclipse里安装SVN插件,一般来说,有两种方式: 直接下载SVN插件,将其解压到eclipse的对应目录里 使用eclipse 里Help菜单的“Install New Software”,通过 ...
- AJAX封装数据处理简单操作
数据的封装处理主要展现在JS中,在页面里面引入封装的JS, "js/ajax.js" 简单封装将get和post方法都写入,get的方法和post的方法依然需要严格区分,包括typ ...
- ch4 圆角框
固定宽度的圆角框 只需要两个图像:一个应用于框的顶部,一个应用于底部 <div class="box"> <h2>Lorem Ipsum</h2> ...
- Gradient descend 梯度下降法和归一化、python中的实现(未完善)
梯度下降法是优化函数参数最常用.简单的算法 通常就是将一组输入样本的特征$x^i$传入目标函数中,如$f(x) = wx + b$,再计算每个样本通过函数预测的值$f(x^i)$与其真实值(标签)$y ...
- HDU 5045 状压DP 上海网赛
比赛的时候想的是把n个n个的题目进行状压 但这样不能讲究顺序,当时精神面貌也不好,真是挫死了 其实此题的另一个角度就是一个n个数的排列,如果我对n个人进行状压,外面套一个按题目循序渐进的大循环,那么, ...
- 深入了解memcached
一.memcached如何支持高并发 Memcached使用多路复用 I/O模型(如epoll.select等).传统阻塞 I/O中,系统可能会因为某个用户连接还没做好 I/O准备而一直等待,直到这个 ...
- 将OB86的故障信息保存在DB86中去
出现DP站故障的时候,CPU会自动调用OB86 ,OB86 的20B 局部变量里面有丰富的故障信息,生成数据块DB86 在DB86 中生成5个双字元素的数组ARAY 在OB86中调用 "BL ...
- fuseki远程访问方法
./fuseki-server启动服务后,我们的服务只能是localhost访问,无法被其他人访问,那么 要怎么修改呢.很简单,把apche-jena-fuseki-3.10.0/run 下面的shi ...
- 【capstone/ropgadget】环境配置
具体环境配置可参考 https://github.com/JonathanSalwan/ROPgadget/tree/master 作者给出的安装方式 但具体配置中出现了问题,如引用时出现如下错误: ...
- iOS 安全地在主线程执行一个Block
//主线程同步队列 #define dispatch_main_sync_safe(block)\ if ([NSThread isMainThread]) {\ block();\ } else { ...