当前位置： 首页 > news >正文

TypeScript 构建工具之 webpack

news 2026/2/8 11:46:12

在实际开发中，直接使用TypeScript 编译器的情况不多。
在项目中，需要使用构建工具对代码进行打包，不可能脱离项目使用TypeScript 编译器单独打包TypeScript 。

那如何将 webpack 和 TypeScript 进行集成？

参考文档：
webpack中文文档
Webpack TypeScript

在根目录下创建package.json文件：

npm init -y

安装核心依赖

  1. 首先确保已经安装了 Node.js 和 npm（或 yarn）。
  2. 在项目目录中，安装 Webpack 和相关的加载器及插件：
    • webpack：Webpack 的核心包。负责实际的模块打包和资源处理工作。
    • webpack-cli：是 Webpack 的命令行工具，提供命令好界面。
    • ts-loader：用于在 Webpack 中处理 TypeScript 文件。
    • typescript：TypeScript 编译器。

使用 npm 安装这些包的命令如下：

npm install -D webpack webpack-cli typescript ts-loader

配置 Webpack

在项目根目录下创建一个webpack.config.js文件，用于配置 Webpack。

基本配置示例：

// 引入 Node.js 的内置模块 path
const path = require('path');// module.exports用于导出 Webpack 的配置对象。
// webpack中的所有配置信息都写在 module.exports 里。
// 这个配置对象包含了诸如入口文件、输出设置、加载器规则、插件等信息，用于告诉 Webpack 如何构建项目。
module.exports = {// 指定入口文件entry: './src/index.ts',// 指定打包文件所在目录output: {// 指定打包文件的目录path: path.resolve(__dirname, 'dist'),// 打包后的文件filename: 'bundle.js'},// 指定 webpack 打包时要使用的模块module: {// 指定要加载的规则rules: [{// 指定规则生效的文件test: /\.ts$/, // 表示匹配所有的后缀名为ts的文件// 要使用的loaderuse: 'ts-loader',// 要排除的文件夹(只要路径里有node_modules,就不编译)exclude: /node_modules/,}]},resolve: {extensions: ['.tsx', '.ts', '.js'],},
}

在这个配置中：

  • const path = require('path');用于引入 Node.js 的内置模块 path。
  • module.exports用于导出 Webpack 的配置对象。这个配置对象包含了诸如入口文件、输出设置、加载器规则、插件等信息，用于告诉 Webpack 如何构建项目。
    • entry指定了项目的入口文件。
    • output定义了输出的文件名和目录。
    • module.rules配置了对 .ts 文件的处理规则，使用 ts-loader进行编译，并排除了 node_modules目录下的文件。
    • resolve.extensions使得在导入模块时可以省略文件扩展名。

配置 TypeScript

在项目根目录下创建一个tsconfig.json文件，这是 TypeScript 的配置文件。
可以直接创建文件，使用命令行工具自动生成：

tsc --init

配置示例：

{"compilerOptions": {"module": "ES2015","target": "ES2015","strict": true}
}

编写 TypeScript 代码

在项目的src目录下创建 TypeScript 文件，例如index.ts，并编写你的 TypeScript 代码。

运行 Webpack 构建

  1. 直接使用npx执行命令：
npx webpack
  1. 在package.json文件配置一个执行命令后通过npm执行

在package.json文件增加一个配置：

"scripts": {"build": "webpack"
},

配置后，就可以运行以下命令来启动 Webpack 构建：

npm run build

执行命令后，生成dist文件夹，打包成功。

webpack集成typescript后，如何在html中运行？

当使用 Webpack 集成 TypeScript 后，可以通过以下步骤在 HTML 中运行打包后的代码：

安装必要的插件

html-webpack-plugin：这是一个非常常用的 Webpack 插件，用于自动生成 HTML 文件，并将打包后的 JavaScript 文件注入到其中。
使用 npm 安装这个插件：

npm install html-webpack-plugin --save-dev

配置 Webpack

在webpack.config.js文件中引入并配置html-webpack-plugin：

// 引入 Node.js 的内置模块 path
const path = require('path');
// 引入html插件
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {// 配置webpack插件plugins: [new HtmlWebpackPlugin({template: './src/index.html', // 指定模板 HTML 文件的路径}),],
};

在这个配置中，创建一个HtmlWebpackPlugin的实例，并指定了一个模板 HTML 文件的路径。这个插件会根据模板文件生成一个新的 HTML 文件，并将打包后的 JavaScript 文件自动注入到其中。

创建 HTML 模板文件

在项目的src目录下创建一个index.html文件，作为模板文件。这个文件包含基本的 HTML 结构。

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页模板</title>
</head>
<body></body>
</html>

打包后的 JavaScript 文件会自动注入到<script>标签中。

运行 Webpack 构建

运行以下命令来启动 Webpack 构建：

npm run build

Webpack 会根据配置进行构建，并在dist目录下生成一个新的 HTML 文件，其中包含了打包后的 JavaScript 文件的引用。

在浏览器中运行

打开生成的 HTML 文件（位于dist目录下），浏览器就会加载并执行打包后的 TypeScript 代码。

如何实现项目有变更时，自动重新构建项目，并自动刷新浏览器？

安装必要的插件

webpack-dev-server：用于启动一个开发服务器，支持热模块替换（HMR）等功能。
使用 npm 安装这个插件：

npm install webpack-dev-server --save-dev

相当于在项目里安装了一个内置的Webpack 开发服务器，可以让项目直接在服务器中运行。这个服务器是与Webapck关联的，当项目有变更时，可以自动构建并更新浏览器页面。

配置 Webpack

运行 Webpack

运行以下命令来启动开发服务器：

npx webpack serve

配置后，使用package.json 配置 npm run serve ，执行命令就报错了，emmm，这一步就等我研究研究再来补上吧=-= 哪位大佬走过路过不要错过，求指点啊啊啊啊啊

相关文章：

TypeScript 构建工具之 webpack

在实际开发中&#xff0c;直接使用TypeScript 编译器的情况不多。 在项目中&#xff0c;需要使用构建工具对代码进行打包&#xff0c;不可能脱离项目使用TypeScript 编译器单独打包TypeScript 。 那如何将 webpack 和 TypeScript 进行集成&#xff1f; 参考文档&#xff1a; w…...

编程日记 2024/8/19 8:03:17

conda环境下在pycharm中调试scrapy项目

前提条件 已经创建好了conda环境已经安装好了scrapy框架项目初始化完成 编写一个爬虫脚本 import scrapyclass StackOverflowSpider(scrapy.Spider):name stackoverflowstart_urls [http://stackoverflow.com/questions?sortvotes]def parse(self, response):print("…...

编程日记 2024/8/19 8:00:14

contenteditable=“true“的标签限制字数的时候修改光标位置

contenteditable"true"的标签限制字数的时候修改光标位置 有时候input和textarea并不能完全满足ui需求&#xff0c;这个时候我们就用contenteditable"true"来将别的标签修改为可编辑状态&#xff0c;但当我们通过js修改了内容之后光标的位置就是一个问题&…...

编程日记 2024/8/19 7:59:12

51单片机-LED灯蜂鸣器数码管按键DS18B20温度传感器

LDE灯的相关程序 LED灯闪烁 LED流水灯 方法1 方法二&#xff1a; 因为P1口可以直接控制P1^0~P1^7的8个led灯&#xff0c;利用一个8位的二进制数字来进行控制即可。如果要点亮P1^0 只需要给P1口传递 1111 1110即可。 蜂鸣器的使用 什么是蜂鸣器&#xff1f; 蜂鸣器是一种一…...

编程日记 2024/8/19 7:53:05

笔记本一线品牌有哪些

笔记本电脑的一线品牌通常指的是在市场上具有较高市场份额、良好口碑、较强的技术实力和服务能力的品牌。根据目前的信息&#xff0c;笔记本电脑市场的一线品牌主要包括以下几个&#xff1a; 联想 (Lenovo)&#xff1a;联想在全球笔记本市场上的占有率较高&#xff0c;其产品线…...

编程日记 2024/8/19 7:47:58

mysql聚合函数和分组

我最近开了几个专栏&#xff0c;诚信互三&#xff01; > |||《算法专栏》&#xff1a;&#xff1a;刷题教程来自网站《代码随想录》。||| > |||《C专栏》&#xff1a;&#xff1a;记录我学习C的经历&#xff0c;看完你一定会有收获。||| > |||《Linux专栏》&#xff1…...

编程日记 2024/8/19 7:46:56

ubuntu20.04+RealSenseD455

ubuntu20.04安装驱动双目相机RealSenseD455 安装环境安装RealSense SDK 2.0ROS包安装启动Realsense摄像头存在的 bugD455标定安装环境 系统：Ubuntu20.04 ROS：Noetic 视觉传感器：Intel RealSense D455 安装RealSense SDK 2.0 该安装有两种方式，一个是用命令安装，另一个是…...

编程日记 2024/8/19 7:45:54

WAF绕过技巧

WAF绕过技巧 WAF&#xff08;Web Application Firewall&#xff09;是一种安全系统&#xff0c;旨在监控和控制网络流量&#xff0c;以防止攻击&#xff0c;如SQL 注入、跨站脚本&#xff08;XSS&#xff09;和拒绝服务&#xff08;DoS&#xff09;。 WAF 可以通过多种方式绕过…...

编程日记 2024/8/19 7:43:48

HarmonyOS应用三之组件生命周期和参数传递

目录&#xff1a; 1、生命周期的执行顺序2、页面数据传递3、图片的读取4、数据的备份和恢复5、轮播图6、页面布局图 1、生命周期的执行顺序 /** Copyright (c) 2023 Huawei Device Co., Ltd.* Licensed under the Apache License, Version 2.0 (the "License");* yo…...

编程日记 2024/8/19 7:42:43

[Qt][Qt 网络][上]详细讲解

目录 0.概述1.UDP Socket1.核心API概览2.回显服务器3.回显客户端 0.概述 要使用Qt中有关网络编程的API&#xff0c;需要添加network模块 1.UDP Socket 1.核心API概览 主要的类有两个&#xff1a;QUdpSocket和QNetworkDatagramQUdpSocket表⽰⼀个UDP的socket⽂件 bind(const …...

编程日记 2024/8/19 7:41:40

读零信任网络：在不可信网络中构建安全系统21读后总结与感想兼导读

1. 基本信息 零信任网络&#xff1a;在不可信网络中构建安全系统 道格巴斯&#xff08;Doug Barth&#xff09; 著 人民邮电出版社,2019年8月出版 1.1. 读薄率 书籍总字数252千字&#xff0c;笔记总字数73194字。 读薄率73194252000≈29.5% 这个读薄率是最高的吧&#x…...

编程日记 2024/8/19 7:40:38

Java基础——注释

在开发中注释是必不可少的&#xff0c;帮助我们更好的标记阅读代码&#xff0c;下面介绍几种常用的注释方式。 一、注释种类 1. 单行注释 使用//一行代码来进行注释&#xff0c;只能注释一行内容 2. 多行注释 使用斜杠星号的方式 /*注释多行代码*/&#xff0c;注释多行代…...

编程日记 2024/8/19 7:33:28

Redis未授权访问漏洞利用合集

一、基本信息 靶机&#xff1a;IP:192.168.100.40 攻击机&#xff1a;IP:192.168.100.60 二、漏洞 & 过程 Redis 未授权访问漏洞利用无口令远程登录靶机 靶机 cd redis-4.0.8/src./redis-server ../redis.conf 攻击机 ./redis-cli -h 192.168.100.40 Redis 未授权访问…...

编程日记 2024/8/19 7:32:26

基于asp.net的在线考试系统、基于c#的在线考试管理系统

摘 要 伴随着社会以及科学技术的发展&#xff0c;互联网已经渗透在人们的身边&#xff0c;网络慢慢的变成了人们的生活必不可少的一部分&#xff0c;紧接着网络飞速的发展&#xff0c;管理系统这一名词已不陌生&#xff0c;越来越多的学校、公司等机构都会定制一款属于自己个…...

编程日记 2024/8/19 7:30:22

将 hugo 博客搬迁到服务器

1. 说明 在 Ubuntu 22.04 上使用 root 账号&#xff0c;创建普通账号&#xff0c;并赋予 root 权限。 演示站点&#xff1a;https://woniu336.github.io/ 魔改hugo主题: https://github.com/woniu336/hugo-magic 2. 服务器配置 建立 git 用户 adduser git安装 git sudo apt …...

编程日记 2024/8/19 7:27:18

【Datawhale AI夏令营第四期】 魔搭-大模型应用开发方向笔记 Task04 RAG模型 人话八股文Bakwaan_Buddy项目创空间部署

【Datawhale AI夏令营第四期】 魔搭-大模型应用开发方向笔记 Task04 RAG模型 人话八股文Bakwaan_Buddy项目创空间部署 什么是RAG&#xff1a; 我能把这个过程理解为Kimi.ai每次都能列出的一大堆网页参考资料吗&#xff1f;Kimi学了这些资料以后&#xff0c;根据这里面的信息综…...

编程日记 2024/8/19 7:24:14

CTF密码学小结

感觉没啥好总结的啊 基础的永远是RSA、流密码、哈希、对称密码、古典密码那一套&#xff08;密码学上过课都会&#xff09;&#xff0c;其他的就是数论的一些技巧 似乎格密码也很流行&#xff0c;以及一些奇奇怪怪的性质利用也很多 1、random设置种子后随机的性质&#xff1a…...

编程日记 2024/8/19 7:22:12

Vue快速入门(七)——Vue3 状态管理 - Pinia（二）

目录 六、核心概念——Getter 1、基本操作 定义getter 访问getter 2、访问其他 getter 3、向 getter 传递参数 4、访问其他 store 的 getter 使用 setup() 时的用法 使用选项式 API 的用法 使用 setup() 不使用 setup() 七、核心概念——Action 1、基本操作 定义a…...

编程日记 2024/8/19 7:21:10

ZooKeeper集群环境部署

1. ZooKeeper安装部署 1.1 系统要求 1.1.1 支持的平台 ZooKeeper 由多个组件组成。一些组件得到广泛支持&#xff0c;而另一些组件仅在较小的一组平台上得到支持。 客户端是 Java 客户端库&#xff0c;由应用程序用于连接到 ZooKeeper 集群。 服务器是在 ZooKeeper 集群节点…...

编程日记 2024/8/19 7:20:06

10 个 C# 关键字和功能

在 Stack Overflow 调查中&#xff0c;C# 语言是排名第 5 位的编程语言。它广泛用于创建各种应用程序&#xff0c;范围从桌面到移动设备再到云原生。由于有如此多的语言关键字和功能&#xff0c;对于开发人员来说&#xff0c;要跟上新功能发布的最新信息将是一项艰巨的任务。本…...

编程日记 2024/8/19 7:19:05

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

编程新知 2025/10/22 11:16:20

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...

编程新知 2026/1/20 19:54:35

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

编程新知 2025/12/20 7:42:02

JavaScript 中的 ES|QL：利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

编程新知 2026/1/23 7:23:58

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

编程新知 2026/1/24 13:05:24

屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

编程新知 2026/1/30 2:45:51

DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

编程新知 2026/2/3 8:13:35

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

编程新知 2026/1/31 12:03:23

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

编程新知 2025/11/3 0:44:41

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

编程新知 2026/1/20 12:53:30