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. java.lang.Long cannot be cast to java.util.Map-Oracle查询异常处理

    Map<String, Object> map一.问题由来 测试环境中进行测试时,某一个接口频繁报一个错,java.lang.Long cannot be cast to java.uti ...

  2. F12 Preserve log 查看之前的api接口返回数据，只有火狐浏览器能用

    F12 Preserve log 查看之前的api接口返回数据,只有火狐浏览器能用

  3. 摆脱鼠标系列 - 用git命令提交代码

    需求 最近开始改变用鼠标的习惯,之前一直是用鼠标点击vscode,点击提交 现在不用鼠标,改用命令行,命令很简单,主要是习惯的改变 实现 vscode环境 ctrl + ` 快捷键打开命令行 git ...

  4. base-table 加入动态slot 流程 vue2

    columns { title: '字段标题', slot: 'yourSlotName', minWidth: 50, align: 'center' }, 组件内 props: { columns ...

  5. day02-MySQL基础知识

    MySQL基本知识 1.数据库 1.1.创建数据库 语法: CREATE DATABASE [IF NOT EXISTS] db_name [create_specification[,create_ ...

  6. Python编程规范+最佳实践

    前言 Python之禅是影响Python编程语言设计的19条原则,也是Python编码规范的核心理念. 优美胜于丑陋(Python 以编写优美的代码为目标) 明了胜于晦涩(优美的代码应当是明了的,命名 ...

  7. 记录--20行js就能实现逐字显示效果？？？-打字机效果

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 效果演示 横版 竖版 思路分析 可以看到文字是一段一段的并且独占一行,使用段落标签p表示一行 一段文字内,字是一个一个显示的,所以这里每一 ...

  8. PHP 数据库表单创建方法记录（储存三方接口数据必用）

    最近项目在对接第三方接口数据,这里分享下我用来偷懒的一个PHP方法: /** * 数据库表单创建方法 * @return string * @throws \Exception */ public f ...

  9. uni-app 地图全解析+事件监听

    最近找到了一篇uni-app的地图解决方案精品文章,这里分享给大家,希望对大家有所帮助 转载地址:https://blog.csdn.net/cplvfx/article/details/111447 ...

  10. 记录--教你用three.js写一个炫酷的3D登陆页面

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前言: 该篇文章用到的主要技术:vue3.three.js 我们先看看成品效果: 高清大图预览(会有些慢): 座机小图预览: 废话不多说, ...