我们的目标是把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. JavaNIO第一话-Buffer

    Buffer是入门Java NIO的基础,本文希望通过一些形象的比喻来解释一下缓冲区的概念,帮助读者快速理解和记忆. 本文灵感来自于Bilibili博主v若水若水分享的尚硅谷Java视频_NIO视频教 ...

  2. java与MySQL数据库的连接

    java与MySQL数据库的连接 1.数据库的安装和建立参见上一篇博客中的第1,2步骤.(http://blog.csdn.net/nuptboyzhb/article/details/8043091 ...

  3. Arm-Linux 移植 Ubuntu

    前言: 这篇文章介绍如何构建一个完整基于ARM的Ubuntu系统. 由于改文章当初写的时候是发表在国外产品论坛上面,故保留了原文内容. 使用到的硬件平台:Geekbox 补充说明: 虽然Geekbox ...

  4. sql 经纬度范围检索(谷歌方案)

    SELECT id, ( * acos ( //公里: 6371 英里: 3959 cos ( radians(78.3232) ) * cos( radians( 数据库纬度字段) ) * cos( ...

  5. 阿里云https+nginx服务搭建

    购买证书 通过控制台进入CA证书服务,点击右上角的购买证书,进入如下图的界面,选择免费的Symantec的DV SSL. 一路点过去,然后回到证书服务主页,会出现一条订单信息,点击补全,如下图所示. ...

  6. JS: 图片轮播模板——左右移动,点击编码移动,自动轮播

    <!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title> ...

  7. setTimeout的异步

    http://www.cnblogs.com/littledu/articles/2607211.html http://www.cnblogs.com/rubylouvre/archive/2009 ...

  8. 前端学习(22)~css问题讲解

    你是如何理解 HTML 语义化的? 语义化:指对文本内容的结构化(内容语义化),选择合乎语义的标签(代码语义化). 举例:段落用 p,边栏用 aside,主要内容用 main 标签. 好处: 便于开发 ...

  9. docker-compose(grafana influxdb) + telegraf 快速搭建简单监控

     灵活实现方案:   1:     telegraf 为go 语言写得占用内存小 收集主机各项监控数据 定时写入 时序DB   influxdb ------------------------&qu ...

  10. Windows按键消息—虚拟键码(转)

    源地址:http://c.biancheng.net/cpp/html/1253.html 虚拟键码保存在WM_KEYDOWN.WM_KEYUP.WM_SYSKEYDOWN和WM_SYSKEYUP消息 ...