Webpack 是一款十分流行的前端打包工具，而 TypeScript 则是被越来越多前端工程师所重视并使用的 JavaScript 超集语言。本文将介绍如何在 Webpack 中使用 TypeScript。
安装
首先，我们需要安装一些必要的依赖：
使用 npm:
npm install webpack webpack-cli typescript ts-loader --save-dev
使用 yarn：
yarn add webpack webpack-cli typescript ts-loader --dev
配置 Webpack
我们需要在 Webpack 的配置文件中，添加对 TypeScript 的支持。
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- ----------
---- ------------
-------- --------------
-
-
--
-------- -
----------- -------- ------ ------
-
--其中，entry 和 output 分别是打包入口和打包输出路径。
在 module.rules 的数组中，我们添加一条针对 .tsx? 文件的规则，依赖于 ts-loader，并将 node_modules 目录排除掉。
在 resolve.extensions 中，我们声明项目中的文件可以省略的后缀名，例如 ".ts" 和 ".tsx"。
配置 TypeScript
在根目录下，新建一个名为 tsconfig.json 的文件，这是我们的 TypeScript 配置文件。该文件的配置将告诉 TypeScript 如何编译我们的代码。下面是一个基础的 tsconfig.json 文件配置：
-- -------------------- ---- -------
-
------------------ -
--------- ----------
---------------- -----
--------- ------
--------- ------
------ -------
--
---------- --------------
-其中，compilerOptions 是编译选项配置。
outDir: 编译后输出的目录。noImplicitAny: 禁用隐式的 any 类型，确保类型安全性。module: 编译的模块代码规范。target: 要编译到的 JavaScript 版本。jsx: 针对 React 应用项目的配置。
示例代码
假设我们有一个名为 index.ts 的文件：
function add(x: number, y: number): number {
return x + y;
}
document.body.textContent = add(7, 8).toString();在命令行中使用 Webpack 进行打包：
npx webpack
或者执行我们在 package.json 文件中添加的 script 命令：
{
"scripts": {
"build": "webpack"
}
}然后，我们就可以执行 npm run build 进行打包了。
打包结束后，我们可以在 dist 目录下看到生成的 bundle.js 文件。在浏览器中打开 index.html，我们可以看到界面输出了 15。
结论
在 Webpack 中使用 TypeScript 并不难，在本文中，我们介绍了如何在 Webpack 中配置 TypeScript，并给出了一个基础的 tsconfig.json 示例。这对想要在已有开发环境的前端项目中添加 TypeScript 的同学，有一定程度的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671b7c2c9babaf620fac096c