TypeScript 构建工具：Webpack 与 ts-loader
要让浏览器运行 TypeScript 代码，必须先把 .ts 文件编译成 .js 文件。Webpack 是一个流行的“打包工具”，它可以自动完成这个转换过程，而 ts-loader 就是 Webpack 用来处理 TypeScript 文件的插件。下面手把手教你从零搭建一个能运行 TypeScript 的 Webpack 项目。
准备工作：初始化项目
创建一个新的项目文件夹，并进入该目录：
mkdir my-ts-project
cd my-ts-project初始化 npm 配置文件，一路回车使用默认选项即可：
npm init -y这会生成一个 package.json 文件，用于记录项目依赖和脚本命令。
安装必要依赖
你需要安装四类工具：
- TypeScript 本身：提供类型检查和编译能力。
- Webpack 核心：负责打包整个项目。
- Webpack 开发服务器：启动本地预览服务。
- ts-loader：让 Webpack 能读懂
.ts文件。
执行以下命令一次性安装所有依赖：
npm install --save-dev typescript webpack webpack-cli webpack-dev-server ts-loader注意：
--save-dev表示这些包只在开发阶段使用，不会被打包进最终上线代码。
配置 TypeScript 编译规则
创建一个名为 tsconfig.json 的文件，这是 TypeScript 的配置文件。内容如下：
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true,
"moduleResolution": "node"
}
}关键参数解释：
"outDir"：指定编译后的 JS 文件输出位置（这里设为./dist/）。"target": "es5"：确保生成的 JS 能在老版本浏览器运行。"module": "es6"：使用现代模块语法，Webpack 会进一步处理。
配置 Webpack 打包规则
创建 webpack.config.js 文件，告诉 Webpack 如何处理 TypeScript 文件：
const path = require('path');
module.exports = {
entry: './src/index.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
devServer: {
static: {
directory: path.join(__dirname, 'dist'),
},
port: 3000,
},
};
```
配置说明：
- `entry: './src/index.ts'`：指定程序入口文件。
- `test: /\.tsx?$/`：匹配所有 `.ts` 和 `.tsx` 文件。
- `use: 'ts-loader'`：用 `ts-loader` 处理匹配到的文件。
- `output.path`：打包结果输出到 `dist` 目录。
- `devServer.port: 3000`：本地开发服务器监听 3000 端口。
---
## 编写你的第一个 TypeScript 文件
**创建**源代码目录和入口文件：
```bash
mkdir src在 src 目录下创建 index.ts 文件，写入以下代码：
function greet(name: string): string {
return `Hello, ${name}!`;
}
const message = greet('TypeScript');
console.log(message);这段代码定义了一个带类型标注的函数，并在控制台输出结果。
添加便捷脚本命令
为了简化操作，编辑 package.json 文件，在 "scripts" 字段中添加两条命令：
{
"scripts": {
"build": "webpack --mode=production",
"start": "webpack serve --mode=development"
}
}现在你可以用简短命令代替完整 CLI 参数：
npm run build：生成生产环境代码。npm run start：启动本地开发服务器。
运行并验证结果
方式一：开发模式（带热更新）
执行以下命令启动开发服务器：
npm run start终端会显示类似信息：
Project is running at http://localhost:3000/打开浏览器，访问 http://localhost:3000。虽然页面是空白的，但打开开发者工具的 Console 面板，你应该能看到输出：
Hello, TypeScript!此时修改 src/index.ts 文件，保存后浏览器会自动刷新并显示新结果。
方式二：生产构建
执行构建命令：
npm run build完成后，项目根目录会生成 dist 文件夹，里面包含：
bundle.js：打包后的 JavaScript 文件。- （可能还有
index.html，如果你后续添加了 HTML 模板）
你可以直接在浏览器中打开 dist/bundle.js 查看编译结果，或配合 HTML 文件使用。
常见问题排查
如果遇到错误，请按以下顺序检查：
-
文件路径是否正确？
确保webpack.config.js中的entry路径与实际index.ts位置一致。 -
是否遗漏依赖？
运行npm list ts-loader确认ts-loader已安装。 -
TypeScript 配置冲突？
如果同时存在tsconfig.json和 Webpack 配置，确保两者模块系统一致（如都用es6）。 -
端口被占用？
修改webpack.config.js中devServer.port的值，例如改为3001。
扩展：添加 HTML 模板
目前页面是空白的，因为缺少 HTML 文件。创建 src/index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TypeScript App</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>然后安装 html-webpack-plugin 自动注入脚本：
npm install --save-dev html-webpack-plugin修改 webpack.config.js，顶部加入：
const HtmlWebpackPlugin = require('html-webpack-plugin');并在 module.exports 中添加：
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],重新运行 npm run start，页面将自动加载 HTML 模板，且 <script> 标签已正确引入 bundle.js。
暂无评论，快来抢沙发吧！