背景
在前端领域使用 TypeScript 已经是越来越普遍的趋势。随着 TypeScript 的普及，使用 Webpack 打包工具来构建前端项目也成为了大家的首选。但是在开发过程中，我们可能会遇到一个问题，就是 Webpack 开发模式下无法读取 TypeScript 文件。
问题原因
Webpack 打包的时候，对于 JavaScript 文件和 TypeScript 文件有不同的处理方式。JavaScript 文件可以直接在浏览器中运行，而 TypeScript 文件需要经过一系列的编译处理才能变成 JavaScript 文件，才能在浏览器中运行。
在 Webpack 开发模式下，Webpack 会监控文件的变化，自动重新构建打包的代码，并把代码推送到浏览器中。由于 TypeScript 文件需要编译处理，因此无法直接读取 TypeScript 文件。
解决方式
解决这个问题的方法比较简单，我们只需要使用一个 Webpack 的插件即可解决，这个插件就是 “ts-loader”。
安装 ts-loader
使用 npm 进行安装：
npm install ts-loader --save-dev
配置 Webpack
在 Webpack 的配置文件中，添加一个 “rules” 选项，来处理 TypeScript 文件。
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- ----------
---- ------------
-------- ---------------
--
-
--
-- ---
-上面的配置中，“test” 表示需要处理的文件类型。这里使用正则表达式来匹配所有的 TypeScript 文件。除此之外，“exclude” 表示排除某些目录或文件，例如 “node_modules”，这样做可以让 Webpack 打包更快。
配置 tsconfig.json
在 TypeScript 的配置文件 “tsconfig.json” 中，需要添加下面一行配置。
{
"compilerOptions": {
// ...
"module": "es6",
// ...
}
}上面的配置表示使用 ES6 的模块化规范。这是因为 “ts-loader” 会把 TypeScript 文件转成 ES6 的模块化语法，然后再由 Webpack 处理。
示例代码
下面的示例代码演示了如何使用 “ts-loader” 在 Webpack 开发模式下读取 TypeScript 文件。
index.html
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ ------------------
-------
------
--- ----------------
------- --------------------------------
-------
-------index.ts
import { sayHello } from './hello';
document.getElementById('title').textContent = sayHello();hello.ts
export function sayHello(): string {
return 'Hello TypeScript!';
}webpack.config.js
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
----- --------------
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
-------- -
----------- ------- ------- ------
--
------- -
------ -
-
----- ----------
---- ------------
-------- ---------------
--
-
-
--总结
在本文中，我们介绍了在 Webpack 开发模式下无法读取 TypeScript 文件的解决方式。使用 “ts-loader” 插件，就可以将 TypeScript 文件转成 JavaScript 文件，从而在 Webpack 中可以正常处理 TypeScript 文件。对于前端开发者来说，学习使用 TypeScript 是有益的，也逐渐成为了一种必须的技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a00b0348841e9894c6889d