TypeScript 如何用 webpack 编译
在日常前端开发中，你可能已经用过 JavaScript 写页面，但它有时候会因为类型不明确而出错——比如把字符串和数字相加，得到的结果可能不是你想要的数字，而是一个奇怪的拼接文本。TypeScript 就是为解决这个问题而生的，它给 JavaScript 加上了“类型提醒”，而 webpack 则是帮我们把 TypeScript 转成浏览器能直接运行的普通 JS 的工具。
第一步：准备基础环境
要让 TypeScript 和 webpack 一起工作，得先装好两个核心工具：Node.js 和包管理器 npm。你电脑上如果已经装了 Node.js（可以在终端输入node -v检查），就可以直接在项目文件夹里初始化 npm 了。
先新建一个空文件夹，比如叫ts-demo，打开终端进入这个文件夹，输入npm init -y，它会自动生成一个package.json文件，用来记录项目的依赖和配置。接着装 TypeScript、webpack 和配套工具：npm install typescript webpack webpack-cli ts-loader --save-dev——这里ts-loader是 webpack 用来识别编译 TypeScript 文件的“翻译官”，必须装。
第二步：写第一个 TypeScript 文件
现在我们来写点简单的 TS 代码试试。在项目里新建src文件夹，再建一个index.ts文件，输入下面的内容：
`typescript
// 定义一个接收名字的函数，名字必须是字符串，返回值也是字符串
function sayHello(name: string): string {
return 你好，${name}，欢迎学习 TypeScript！;
}
// 调用函数，传入字符串“小李”
console.log(sayHello('小李'));
`
这段代码里的: string就是 TypeScript 的“类型标注”，如果后面不小心写成sayHello(123)，编辑器会立刻报错，避免运行时出错。
第三步：配置核心文件
光有代码和工具还不够，得告诉它们怎么配合，这就要建两个核心配置文件。
第一个是 TypeScript 的配置文件tsconfig.json，在项目根目录新建，内容可以写：
`json
{
"compilerOptions": {
"target": "es5", // 编译成兼容老旧浏览器的JS版本
"module": "commonjs", // 模块规范
"strict": true, // 开启严格模式，帮你发现更多问题
"esModuleInterop": true
},
"include": ["src/**/*"] // 告诉TS要编译src里的所有文件
}
`
第二个是 webpack 的配置文件webpack.config.js，也在根目录，内容如下：
`javascript
const path = require('path');
module.exports = {
entry: './src/index.ts', // 入口文件，也就是我们写的TS文件
output: {
filename: 'bundle.js', // 编译后生成的文件名
path: path.resolve(__dirname, 'dist') // 生成的文件放在dist文件夹
},
resolve: { extensions: ['.ts', '.js'] }, // 允许导入时省略后缀
module: { rules: [{ test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/ }] }
};
`
这里的module.rules里的规则，就是告诉 webpack：遇到.ts结尾的文件，要用ts-loader处理，同时排除node_modules里的第三方文件，避免干扰。
第四步：编译运行
现在只差最后一步了，打开package.json，在scripts里加一行：
`json
"scripts": {
"build": "webpack --mode development"
}
`
保存后，在终端输入npm run build，webpack 就会自动把 TypeScript 编译成普通的 JS 了。等终端出现webpack 5.x.x compiled successfully的提示，你会发现项目里多了一个dist文件夹，里面的bundle.js就是浏览器能直接运行的文件。
你可以再新建一个index.html，引入这个bundle.js，打开浏览器控制台，就能看到“你好，小李，欢迎学习 TypeScript！”的输出了。要是刚才的函数里写错了类型，比如sayHello(123)，编译时就会报错，帮你提前揪出问题。
其实整个过程就像你用手机拍了一张高清的 TypeScript 照片，webpack 就是那个帮你把高清图压缩成手机能快速打开的普通图片的工具，中间的ts-loader就是转换的关键滤镜，而配置文件就是告诉滤镜怎么转、转成什么样的规则。