先看一下要实现的工程结构
文件结构.png
build目录,存放我们的webpack打包配置
其中将配置细分为
1.webpack.base.config.js 公共部分配置
2.webpack.dev.config.js 开发环境的配置，用于程序开发阶段
3.webpack.pro.config.js 生产环境配置，用于程序开发完要打包上线进行使用
4.webpack.config.js 配置的公共入口，其中使用插件webpack-merge来进行配置的合并
dist目录，存放我们打包好的文件
这里使用插件clean-webpack-plugin来清空我们之前打包好的文件，因为实际工程开发要在打包好的文件名后面加哈希值，来进行缓存刷新，使用这个插件是为了防止文件冗余
node_modules目录,存放我们的npm模块
基本可以忽略，一出BUG就不好整
src目录，我们实际开发TS项目的目录
tel目录下存放着我们的html模板文件，用作项目的入口文件，打包好的各种文件会自动引入该模板文件当中，其中我们需要使用到插件html-webpack-plugin，该插件的目的就是将打包好的文件自动引入到入口模板文件当中
index.ts文件是我们整个项目打包的入口文件，这里我们要使用两个插件typescript ts-loader，其中ts-loader是webpack使用，用来处理ts文件的，loader也会帮我们执行tsc命令，typescript用来将ts代码编译成js代码的，你用什么语言写，最后都会编译成浏览器能识别的js代码
package.json文件，用来配置项目的运行，打包，插件，作者信息什么的
其中要修改默认的入口文件配置
"main":"./src/index.ts"
还有脚本配置
"scripts": {
"start":"webpack-dev-server --mode=development --config ./build/webpack.config.js",
"build":"webpack --mode=production --config ./build/webpack.config.js"
},
其中start脚本需要安装webpack-dev-server插件，用来启动一个本地服务器来运行项目
一个基础的TS工程就创建好了
最后看看我们使用了哪些包，来构建项目
"devDependencies": {
"clean-webpack-plugin": "^4.0.0",
"html-webpack-plugin": "^5.5.0",
"ts-loader": "^9.3.0",
"typescript": "^4.7.3",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.2",
"webpack-merge": "^5.8.0"
}
