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. vscode 提取扩展时出错 XHR failed

    vscode 提取扩展时出错 XHR failed 起因 vscode 安装 Bracket Pair Color DLW 插件,商店打不开了 解决方案 打开 hosts 添加 13.107.42.1 ...

  2. whale - awesome 关联单词

    whale - awesome 关联单词 whale 对应 awesome 里面的 awe 两个含义应该是一样的. whale wa哇-惊叹词-大型海洋生物-鲸鱼 来自古英语hwael,大型海洋生物, ...

  3. [置顶] java.io.IOException: No such file or directory解决方案之权限问题

    先贴出异常信息: java.io.IOException: No such file or directory at java.io.UnixFileSystem.createFileExclusiv ...

  4. [转载]Linux根据关键词查找文件/函数/结构体命令整理

    本文来自博客园,作者:Jcpeng_std,转载请注明原文链接:https://www.cnblogs.com/JCpeng/p/15077235.html 一.查找文件 使用 Linux 经常会遇到 ...

  5. python读取文本多行合并一行

    # 需要合并的行数 col = 4 # 创建新文件 nf = open("*.txt", "w+") # 读取初始文件 with open("*.tx ...

  6. PAT 甲级1005【1005 Spell It Right】

    用JAVA可以用BigInteger解决. import java.io.BufferedReader; import java.io.IOException; import java.io.Inpu ...

  7. 不用写一行代码！Python最强自动化神器！

    1.Playwright介绍 Playwright是一个由Microsoft开发的开源自动化测试工具,它可以用于测试Web应用程序.Playwright支持多种浏览器,包括Chrome.Firefox ...

  8. YOLOv4: 虽迟但到，大型调优现场，43mAP/83FPS | 论文速递

    YOLOv4在速度和准确率上都十分优异,作者使用了大量的trick,论文也写得很扎实,在工程还是学术上都有十分重要的意义,既可以学习如何调参,也可以了解目标检测的trick.   来源:晓飞的算法工程 ...

  9. KingbaseES 串行化隔离级别引起的阻塞分析

    前言 这是实际生产环境中遇到的一个问题,前端业务有如下报错: could not serialize access due to read/write dependencies among trans ...

  10. 如何安装和使用Docker

    本文深入解析Docker,一种革命性的容器化技术,从其基本概念.架构和组件,到安装.配置和基本命令操作.文章探讨了Docker在虚拟化.一致性环境搭建及微服务架构中的关键作用,以及其在云计算领域的深远 ...