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. 真实开发中-redis在项目中的应用场景

    一.需求描述 从自己当前负责参与开发的一个项目中来看,redis主要的应用场景有如下几个,第一个是保存用户信息,这个需要频繁的获取.比如 在打开某一个页面进行查询时,就先需要获取用户信息,看用户是否具 ...

  2. C#中的JSON序列化方法

    在C#中的使用JSON序列化及反序列化时,推荐使用Json.NET--NET的流行高性能JSON框架,当然也可以使用.NET自带的 System.Text.Json(.NET5).DataContra ...

  3. JavaXMail发送邮件功能实现

    原文:JavaXMail发送邮件功能实现 | Stars-One的杂货小窝 好久之前实现的邮件发送功能,一直没整理出来,考虑到之后有个项目需要,先整理一波 提示: 本文代码例子是使用Kotlin语言编 ...

  4. C# NAudio 播放多个MP3文件

    C# 使用 NAudio 来播放多个MP3文件.上代码 1.引入NAudio:using NAudio.Wave; 2.定义变量: private WaveOutEvent outputDevice; ...

  5. 05_QT_Mac开发环境搭建

    在不同的Mac环境下,实践出来的效果可能跟本教程会有所差异.我的Mac环境是:Intel CPU.macOS Moterey(12.4). FFmpeg 安装 在Mac环境中,直接使用Homebrew ...

  6. java基础 韩顺平老师的 面向对象（中级） 自己记的部分笔记

    272,包基本介绍 包的三大作用 1,区分相同的类   2,当类很多时,可以很好的管理类   3,控制访问范围 包基本用法 package com.hspedu; 说明: 1,package 关键字, ...

  7. Spring Boot学习日记

    学习了springboot 的优点 为所有Spring开发者更快的入门 开箱即用,提供各种默认配置来简化项目配置 内嵌式容器简化Web项目 没有冗余代码生成和XML配置的要求 Spring开发-Hel ...

  8. eviacam在Arch/Manjaro Linux下的安装

    安装base-devel 安装编译工具,默认的依赖里没有编译工具 sudo yay -S base-devel 如果安装编译工具,会报类似下面的错误: 安装eviacam yay -S eviacam ...

  9. 【Nginx】如何使用自签CA配置HTTPS加密反向代理访问？看了这篇我会了！！

    写在前面 随着互联网的发展,很多公司和个人越来越重视网络的安全性,越来越多的公司采用HTTPS协议来代替了HTTP协议.为何说HTTPS协议比HTTP协议安全呢?小伙伴们自行百度吧!我就不说了.今天, ...

  10. 一秒变身艺术家！U2Net 跨界肖像画，让你的头像瞬间细节完美复刻，打造个性化头像新风潮！

    效果 测试图片来自网络,如有侵权,联系删除. 项目 关注微信公众号,回复关键字:"一秒变身艺术家",获取程序! 模型信息 Inputs ---------------------- ...