TypeScript 是具有类型系统的 JavaScript 的超集，通过编译转化为普通 JavaScript 代码。这篇指南里我们将会学习 webpack 是如何跟 TypeScript 进行结合。
在开始 webpack 和 TypeScript 整合之前，我们首先必须在项目里安装 webpack。如果你还没安装，请查阅 webpack 安装指南。
要能在 webpack 里使用 TypeScript，你需要准备好下面这些事情：
你可以通过 npm 安装 TypeScript 编译器和 TypeScript loader，运行下面这个命令来安装： npm install --save-dev typescript ts-loader
tsconfig.json
tsconfig 配置文件可以从一个空白的文件逐一添加配置项，下面有一个基本的配置示例，用来把 TypeScript 代码编译成 es5 代码，同时支持 JSX。
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react",
"allowJs": true
}
} 可以查看 TypeScript 官方文档了解更多关于 tsconfig.json 的配置选项。
webpack.config.js
使用 TypeScript 编写的 webpack 基本配置大概是这样：
module.exports = {
entry: './index.ts',
output: {
filename: '/bundle.js',
path: '/'
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
},
]
},
resolve: {
extensions: [".tsx", ".ts", ".js"]
},
};
这个例子里我们指定了入口起点为当前目录的 index.ts 文件，输出文件命名为 bundle.js，以及负责把 TypeScript 编译成 JavaScript的 TypeScript loader，同时也添加了 resolve.extensions 来告诉 webpack 在解析查找 TypeScript 模块时该检索哪些文件扩展名。
当前有 2 个可用的 TypeScript loader：
Awesome TypeScript loader 文档里已经很好的解释了 awesome-typescript-loader 和 ts-loader 的区别。
可以阅读 这篇文章 了解更多。
在本指南中，我们将使用 ts-loader，因为它更简便地启用额外的 webpack 功能，例如将非代码资源导入到项目中。
为了启用 source maps 功能，首先必须配置 TypeScript 将 source maps 内联输出到编译好的 JavaScript 文件，可通过将 sourceMap 属性设置为 true 来实现。
tsconfig.json
{
"sourceMap": true
} 当开启了 TypeScript 的 source maps 输出特性后，我们需要告诉 webpack 来提取这些 source maps 并发送给浏览器，这样我们在浏览器看到的源码文件，就跟在代码编辑器中看到的一样。
webpack.config.js
module.exports = {
entry: './index.ts',
output: {
filename: '/bundle.js',
path: '/'
},
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
loader: "source-map-loader"
},
{
enforce: 'pre',
test: /\.tsx?$/,
use: "source-map-loader"
}
]
},
resolve: {
extensions: [".tsx", ".ts", ".js"]
},
devtool: 'inline-source-map',
}; 首先我们添加一个新 loader，名为 source-map-loader。
运行下面的命令安装：
npm install --save-dev source-map-loader。
这个 loader 安装完成后，我们想让这个 loader 比其他任何 loader 都要先运行，可以使用 enforce: 'pre' 这个配置项来标记。
最后，我们需要通过指定 devtool 来启用 webpack 的 source maps 功能。
当前我们使用的是 'inline-source-map' 这个属性值。想了解更多关于这个属性值的特性和其他属性值选项，可以查看 devtool 文档。
当从 npm安装第三方库时，记住一定要同时安装这个库的类型声明文件。
你可以从 @types 仓库找到并安装这些第三方库的类型声明文件。
举个例子，如果想安装 lodash 这个库的类型声明文件，我们可以运行下面的命令： npm install --save-dev @types/lodash
想了解更多，可以查看这篇文章
要在 TypeScript 里使用非代码资源，我们需要告诉 TypeScript 如何兼容这些导入类型。
那么首先，我们需要在项目里创建 custom.d.ts 文件，这个文件用来编写自定义的类型声明。
我们要想兼容 svg 类型的资源导入，就需要在 custom.d.ts 文件里添加以下内容：
declare module "*.svg" {
const content: any;
export default content;
} 上面代码为 svg 声明了一个新模块，使得 TypeScript 能够识别到 以 .svg 结尾的资源导入，同时定义了这个模块的类型为任意类型（any）。如果我们想指定更加明确模块类型，假如可以判断出这是一个 url，那么我们可以将类型定义为字符串。
这不仅适用于 svg，也适用于其他任何你想使用的自定义 loader，包括css，scss，json或是你希望加载到项目中的其他任何文件。