1.需要安装的依赖

  "dependencies": {

    "html-webpack-plugin": "^5.5.0",

    "ts-loader": "^9.2.6",

    "ts-node": "^10.4.0",

    "tslib": "^2.3.1",

    "typescript": "^4.4.4",

    "webpack": "^5.60.0",

    "webpack-cli": "^4.9.1",

    "webpack-dev-server": "^4.4.0"

  },

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "build": "webpack",

    "serve": "webpack serve"

  },

2. webpack.config.js配置

const path = require('path').resolve(__dirname, './dist')

const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {

  // 需要添加模式,否则报错

  mode: 'development',

  // 完整相对路径

  entry: './src/main.ts',

  output: {

    path,

    filename: 'bundle.js'

  },

  resolve: {

    // 只匹配ts会导致 无法正常运行js代码

    extensions: ['.ts', '.js', '.cjs', '.json']

  },

  // 使用ts-loader

  module: {

    // 规则是一个数组

    rules: [

      {

        test: /\.ts$/,

        loader: 'ts-loader'

      }

    ]

  },

  plugins: [

    // 插件需要 通过new 进行使用

    new htmlWebpackPlugin({

      template: './index.html'

    })

  ]

}

3.index.html 模板文件

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>ts Learn</title>

    <script src="./src/main.ts"></script>

  </head>

  <body></body>

</html>

5. 文件结构

6.遇到问题

扩展规则少了 js文件的匹配

Module not found: Error: Can't resolve './log' in '/Users/zdz/Desktop/LearnCode/learn-code/Ts/node_modules/webpack/hot'

htmlWebpackPlugin需要通过new构造使用

ypeError: Class constructor HtmlWebpackPlugin cannot be invoked without 'new'

    at Object.<anonymous> (/Users/zdz/Desktop/LearnCode/learn-code/Ts/webpack.config.js:28:5)

本地使用ts配置的更多相关文章

  1. Centos6.4 本地yum源配置

    由于单位的服务器均使用的是内网,而安装一些软件如Git,需要很多的依赖包,使用yum安装相对简单,由于不能联网故配置本地yum源配置. 1.首先将需要rpm库添加到系统中: 1).虚拟机中安装的lin ...

  2. bat批处理文件启动Eclipse和ivy本地仓库的配置

    一.bat批处理文件启动Eclipse 所需文件: 1.eclipse 2.jre 3.startup-eclipse.bat 确保以上三个文件夹同级 startup-eclipse.bat: set ...

  3. 本地Git环境配置

    在Git Bash下获取源码时,提示permission denied publickey. 原因是本地帐号配置不正确,解决办法 生成SSH文件 1,进入Git Bash 2,  输入下面文字 ssh ...

  4. RedHat和CentOS使用本地yum源配置

    2013-04-01 11:38:30 标签:本地yum源 版权声明:原创作品,谢绝转载!否则将追究法律责任. 使用yum命令安装所需的软件,如果设备网络状况很好,当然也没必要去配置本地yum源,直接 ...

  5. oracle如何连接别人的数据库，需要在本地添加一些配置

    2.oracle如何连接别人的数据库,需要在本地添加一些配置 1.找到 listener.ora 文件,打开(一般在 C 文件夹) ORCL = (DESCRIPTION = (ADDRESS = ( ...

  6. VUE请求本地数据的配置json-server

    VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...

  7. 远程代码仓库URL地址变更后本地仓库的配置方法

    作者:荒原之梦 原文链接:http://zhaokaifeng.com/?p=556 今天修改了一个远程仓库的项目名称,导致Git仓库的地址发生了变化,Push代码时显示"Git仓库找不到& ...

  8. VUE开发请求本地数据的配置，旧版本dev-server.js，新版本webpack.dev.conf.js

    VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...

  9. 本地Maven环境配置

    本地Maven环境配置 下载配置文件:http://10.1.10.138:6060/root/DevelopmentSpecification/archive/master.zip 解压master ...

  10. CentOS7利用本地yum源配置NBD

    一:CentOS7.0创建本地YUM源 (物理机:直接将刻录的CentOS7光盘利用光驱插入物理机上) (虚拟机: CD/DVD>>连接本地ISO) 针对物理机192.168.9.112进 ...

随机推荐

  1. linux环境下基于python的OpenCV 保存视频

    一 概念 在OpenCV中保存视频使用的是VedioWriter对象,在其中指定输出文件的名称, A 创建视频写入的对象 out = cv2.VideoWriter(filename,fourcc, ...

  2. Git | Git Server 搭建，在自己的服务器上进行 git server 搭建

    系列文章目录 目录 系列文章目录 前言 操作 1. 创建 git 用户 2. 创建 .ssh 目录 3. 自定义仓库的根目录 4. 在服务器上创建个裸仓库 5. 手动配置一个公钥 6. 在本地测试一下 ...

  3. String类为什么要用final修饰？

    final修饰符的意义? https://www.cnblogs.com/loren-Yang/p/13380318.html String类被实现的目标是什么? 效率和安全 如何实现期望? 参考文献 ...

  4. 02.Android崩溃Crash库之App崩溃分析

    目录总结 01.抛出异常导致崩溃分析 02.RuntimeInit类分析 03.Looper停止App就退出吗 04.handleApplicationCrash 05.native_crash如何监 ...

  5. 记录--Loading 用户体验 - 加载时避免闪烁

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 在切换详情页中有这么一个场景,点击上一条,会显示上一条的详情页,同理,点击下一条,会显示下一条的详情页. 伪代码如下所示: 我们定义了一个 ...

  6. ElasticSearch中_source、store_fields、doc_values性能比较【转载】

    原文地址请点击 在这篇文章中,我想从性能的角度探讨ElasticSearch 为我们存储了哪些字段,以及在查询检索时这些字段如何工作.实际上,ElasticSearch和Solr的底层库Lucene提 ...

  7. sys_spacequota 扩展插件介绍

    插件sys_spacequota简介 sys_spacequota可以对指定表空间的大小进行限额,一旦大于该限额,例如对此表空间里的数据进行insert, update, copy to, selec ...

  8. CTFshow pwn53 wp

    PWN53 那么先看保护 虽然没有开canary但是本题在ida打开看见他是模拟了canary的效果,不同的是他的是固定的canary,但是一样要爆破 而且发现还有后门函数 在ctfshow函数我们发 ...

  9. #启发式合并，链表#洛谷 3201 [HNOI2009] 梦幻布丁

    题目 \(n\)个布丁摆成一行,进行\(m\)次操作. 每次将某个颜色的布丁全部变成另一种颜色的, 然后再询问当前一共有多少段颜色. (\(n,m\leq 10^5,col\leq 10^6\)) 分 ...

  10. 使用CMake启用RUNPATH特性

    使用CMake,启用RUNPATH特性,可以参考官方帖子. 如下源码来自于上述帖子. CMAKE_MINIMUM_REQUIRED(VERSION 2.8 FATAL_ERROR) PROJECT(R ...