这篇文章主要讲解 如何通过webpack对我们的代码进行编译？
因为ts不可能脱离打包工具来进行运行，因此我们需要掌握的就是如何在webpack中打包ts代码。
首先创建一个文件夹，并对该文件夹进行初始化，npm init -y，目的是生成一个package.json文件
接着我们需要安装wedpack所需要的依赖
安装的ts 及 ts-loader就是为了webpack能与ts进行整合
npm i -D webpack webpack-cli typescript ts-loader此时就安装好了
此时我们需要对webpack进行一个基本的配置，才能使用webpack基本的功能
新建一个webpack.config.js
// 引入一个包
const path = require('path')
// webpack中所有的配置信息都应该写在module.exports中
module.exports = {
// 指定入口文件
entry: "./src/index.ts",
// 指定打包文件所在目录
output: {
// 指定打包文件目录
path: path.resolve(__dirname, 'dist'),
// 打包后的文件名
filename: "bundle.js"
},
// 指定webpack打包时要使用模块
module: {
// 指定图片、资源等要加载的规则
rules: [
{
// test指定的是规则生效的文件
test: /\.ts$/,//匹配所有以ts结尾的文件
use: 'ts-loader',//用ts-loader去处理以ts结尾的文件
// 要排除的文件
exclude: /node-modules/
}
]
}
}配置好后，我们要想对ts进行编译，还需要定义一个ts的编译规范，所以还需要创建一个 tsconfig.json，我们简单设置几个属性
{
// compilerOptions编译器的选项
"compilerOptions": {
// target 用来指定ts被编译为ES的版本，默认是ES3
// 可以是 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017','es2018','es2019','es2020','esnext'.
"target": "ES6",
// module 指定要使用的模块化的规范
"module": "CommonJS",
// 所有严格检查的总开关
"strict": false,
},
}在package.json中我们还需要加一个命令来进行打包，通过build命令来执行webpack
这样我们最基本的ts+webpack的组合就完成了
项目目录：
此时我们在index.ts中编写一段ts代码
再进行打包，可以看到代码已经被转换为了js代码
那基本的配置好了之后，我们还需要一个入口html文件去加载js资源，
此时需要安装一个插件，他的作用就是给我们自动生成一个html文件，然后再去加载相关资源
html-webpack-plugin
npm i -D html-webpack-plugin
安装完了之后需要引入
const HTMLWebpackPlugin = require('html-webpack-plugin')
之后需要配置webpack插件
此时再打包就可以看到，他会自动生成一个html文件
此时的html模板是自动生成的，那我们如果说想要他生成的时候按照自己定义的结构来生成，此时就需要我们在src下自己创建一个html，然后配置之后，打包时他就会根据我们已有的模板进行生成
进行设置模板
可以看到打包之后就是我们定义的模板
那问题来了。我想在浏览器里面去访问我的网页怎么办？
并且实时更新的，我们改一个东西，浏览器就会自动刷新。
这时需要安装另一个插件，安装它就相当于在我们的项目里装了一个内置服务器，安装好之后项目就可以直接在该服务器运行，他可以根据你项目的改变自动去刷新
webpack-dev-server
npm i -D webpack-dev-server
安装好之后我们需要package.json中去定义
完了之后用npm start运行，运行正确
此时我们可以看到修改ts代码，他就会自动更新
当我们想要打包之后，将dist文件夹先删除掉再生成，而不是直接替换，这时候就用到了另一个插件。
clean-webpack-plugin
npm i -D clean-webpack-plugin
然后同样引入并配置
接下来是另一个插件，假如我们要在一个ts文件里面引入另一个ts文件中的变量，此时ts是作为模块被引入的，但是webpack并不知道，这时候运行时会报错，那么我们需要配置引用模块的文件类型，将js和ts文件都作为模块引入的范围、
配置引用模块的文件类型
定义一个test文件设置一个变量、
在index.ts中引入
如果不配置，打包时就会报错
如果我们想让打包之后不是替换dist文件，而是先删除后打包，如何呢？
此时用到另一个插件
clean-webpack-plugin
npm i -D clean-webpack-plugin 
此时你就可以正常在项目里面编写ts代码并实时更新了~