【学习笔记】使用webpack打包TypeScript代码

君的名字

已于 2024-05-07 09:27:59 修改

阅读量664

点赞数 3

分类专栏：【TypeScript】文章标签：学习笔记 webpack

于 2024-02-07 17:52:33 首次发布

本文链接：https://blog.csdn.net/chichoxian/article/details/136065949

版权

本文介绍了如何使用webpack打包TypeScript代码，从安装npm、配置webpack.config.js到设置tsconfig.json，以及利用插件生成HTML运行文件。通过教程，读者可以掌握完整的打包流程。

摘要由CSDN通过智能技术生成

文章目录

写在前面的话
使用安装
参考文献

写在前面的话

使用webpack 打包TS的代码，我们需要用到 npm这个包管理工具，我们首先进入到我们的代码根目录下，然后输入下面这个命令：

npm init -i

这个时候就会在我们项目的目录下面生成 package.json这个文件

输入这个命令，按照自己的需要输入每一个配置属性需要的值，之后输入回车即可

在这里插入图片描述

一路回车之后，我们可以得到下面这样一个package.json

{
   
  "name": "part2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license":

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

君的名字

关注关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

使用webpack打包编译TypeScript代码

weixin_52139094的博客

06-28

849

TypeScript打包 webpack整合通常情况下，实际开发中我们都需要使用构建工具对代码进行打包； TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS；步骤如下：初始化项目进入项目根目录，执行命令 npm init -y，创建package.json文件下载构建工具命令如下： npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plug

使用webpack搭建TypeScript环境

chengxuyuan3629的博客

10-16

1070

使用Webpack搭建环境

参与评论您还未登录，请先登录后发表或查看评论

TypeScript 构建工具之 webpack

最新发布

咸鱼滚滚

08-14

963

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

Webpack系列——TypeScript 的打包配置

Smart_J_King的博客

01-14

470

一、TypeScript TypeScript 是 JavaScript 类型的超集，它能够被转换为普通的 JavaScript。为了在 webpack cli 中使用 ts ，需要安装特定的 loader 来转换 ts 语法。 1.1 依赖安装 npm install typescript ts-loader -D 1.2 webpack.config.js const path = require('path') module.exports = { mode: 'develo..

TypeScript学习（3：项目中的使用以及配置）

MRslonly的博客

03-31

243

环境搭建：初始化项目： npm init -y 安装你所需的依赖：如： npm i -D webpack webpack-cli typescript ts-loader cnpm i -D @babel/core @babel/core @babel/preset-env babel-loader core-js cnpm i -D html-webpack-plugin cnpm i -D webpack-dev-server cnpm i -D clean-webpack-plugin 然

使用Webpack打包Typescript

qq_42059717的博客

10-13

1042

使用webstorm的话直接用它新建的就行了。

webpack之Typescript

yangyanqin2545的博客

01-06

128

webpack之Typescript 如何在webpack工程化环境中集合TS 需要安装ts和对应的loader npm install --save-dev typescript ts-loader 接下来需要在项目根目录下添加一个ts的配置文件–tsconfig.json，可以使用ts自带的工具来自动化生成它。 const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin') module.ex

koa学习笔记：利用Webpack4+Koa2+React搭建开发框架

qq_24724109的博客

12-11

1140

11. 使用Webpack 4，Koa2和React搭建开发框架 1. Webpack配置 1. 脚本配置 // package.json "scripts": { "server": "node ./server/index.js", "dev_fro": "webpack-dev-server --config ./frontend/build/webpack.dev.js -...

webpack学习笔记

07-25

Webpack学习笔记涵盖了模块打包工具Webpack的基本概念、使用方法以及与webpack-dev-server搭配使用的实践。接下来，我将详细介绍这些知识点。首先，Webpack是一个现代JavaScript应用程序的静态模块打包器(module ...

【学习笔记】TypeScript

Eddie_hyh的博客

05-28

756

TypeScript

typescript例子-所有代码打包

09-01

typescript例子-所有13个代码全部打包

【Vue3+Ts】—— webpack学习笔记（一）

qq_53061847的博客

07-04

990

事实上随着前端的快速发展，目前前端的开发已经变的越来越复杂了：但是对于很多的前端开发者来说，并不需要思考这些问题，日常的开发中根本就没有面临这些问题：这是因为目前前端开发我们通常都会直接使用三大框架来开发：Vue、React、Angular；但是事实上，这三大框架的创建过程我们都是借助于脚手架（CLI）的；事实上Vue-CLI、create-react-app、Angular-CLI都是基于webpack来帮助我们支持模块化、less、 TypeScript、打包优化等的；官方解释： webp..

《TypeScript》一文入门Webpack构建工程化项目

Oliver尹的博客

11-04

238

简介在现代的项目开发往往是Vue，React做工程化的构建，即使用到TypeScript也是集成在框架里，而基础的编译，使用到的loader都是框架已经弄好了，为了更好的理解这里面的相关知识，自己尝试一下，还是很有必要的。目标使用Webpack+TypeScript搭建一个项目，并可以使用使用命令进行编译。构建项目创建项目文件夹随便找个目录，创建一个文件夹，这个文件夹就是以后的项目文件夹。安装NodeJS 如果没有安装过node，先到NodeJS官网下载安装包，下载成功后，点击下一

Webpack与TypeScript

Meskjei的博客

09-06

747

文章目录引入使用问题引入 TypeScript是最近一段时间非常火的一个JavaScript的超集。说是超集，那么自然TypeScript也完整的支持JavaScript语法，同时还提供了许多新特性。那么Webpack也能够对TypeScript的源文件进行打包。使用首先创建一个新项目，就叫typescript。然后在项目根目录下新建src文件夹、webpack.config.js配置文...

demo05 webpack + typescript

weixin_33755847的博客

05-25

270

1.关于 typescript typescript（简称 ts ）是 javascript 的超集，具有类型系统，是可编译的。可以想象得到，在代码运行之前能够进行代码类型检查和编译是多么重要的事儿（就像 Java 等强类型语言一样）。比如前端框架 @Angular 就默认集成了 ts , 赋予了 @Angular 项目可以编译的功能。对 ts 不了解的? 先撸一遍 ts 文档?：www....

深入浅出webpack学习(13)--使用TypeScript

weixin_34413357的博客

03-07

130

认识TypeScript TypeScript是JavaScript的一个超集，主要提供了类型检查系统和对ES6语法的支持。但不支持新的API。目前没有任何环境支持运行原生的TS代码，必须通过构建把它转换成JavaScript代码后才能运行。下面是一个ts代码： //show.js //操作DOM元素，把content显示到网页上 /...

在WebPack中使用TypeScript

几百块的博客

09-28

619

npm install typescript npm i ts-loader 配置webpack.config.js的loader { test: /\.ts$/, exclude: /node_modules/, use: ['ts-loader'] } webpack全部配置如下： const path = require('path')//node内置path模块 const { webpack } = require('webpack') const HtmlPlugin =

webpack+typescript打造phaser3游戏学习实践项目

资源摘要信息:"基于 webpack + typescript 的 phaser3 游戏学习项目" 知识点一：webpack 的配置与使用 webpack 是一个现代 JavaScript 应用程序的静态模块打包器。通过 webpack，可以将项目中散落的 JavaScript ...