【极客】TS开发实战-TS工程搭建

先看一下要实现的工程结构

文件结构.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就不好整

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"
  }

【极客】TS开发实战-TS工程搭建