【Vue3+Ts】—— TypeScript打包构建

webpack整合

通常情况下，实际开发中我们都需要使用构建工具对代码进行打包；

TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS；

步骤如下：

一、初始化项目

进入项目根目录，执行命令

 npm init -y

创建package.json文件

二、下载构建工具

命令如下：

npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin

共安装7个包:

• webpack：构建工具webpack
• webpack-cli：webpack的命令行工具
• webpack-dev-server：webpack的开发服务器
• typescript：ts编译器
• ts-loader：ts加载器，用于在webpack中编译ts文件
• html-webpack-plugin：webpack中html插件，用来自动创建html文件
• clean-webpack-plugin：webpack中的清除插件，每次构建都会先清除目录

三、配置webpack

根目录下创建webpack的配置文件webpack.config.js：