TypeScript是JavaScript的一个类型化的超集，可以编译成纯JavaScript，在本指南中，我们将学习如何将Typescript与webpack集成。

基本设置

为了开始使用webpack和Typescript，首先我们必须在我们的项目中安装webpack。 如果您没有这样做，请查看webpack安装指南。

要开始使用包含Typescript的webpack，您需要几件事情：

• 在您的项目中安装Typescript编译器。
• 安装一个Typescript加载器（在这种情况下，我们使用的是ts-loader）。
• 创建一个tsconfig.json文件以包含我们的TypeScript编译配置。
• 创建webpack.config.js以包含我们的webpack配置。
• 您可以通过运行以下方法从npm安装TypeScript编译器和TypeScript加载器：

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应该沿用这些代码：

const path = require("path");
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
module.exports = {
 ???entry: {
 ???????app: ‘./src/index.ts‘
 ???},
 ???output: {
 ???????path: path.resolve(__dirname, "./dist"),
 ???????filename: ‘bundle/[name].bundle.js‘
 ???},
 ???mode:"development",
 ???devtool: ‘inline-source-map‘,
 ???resolve: {
 ???????extensions: [‘.tsx‘, ‘.ts‘, ‘.js‘]
 ???},
 ???module: {
 ???????rules: [
 ???????????{
 ???????????????test: /\.tsx?$/,
 ???????????????use: [
 ???????????????????{
 ???????????????????????loader: "ts-loader"
 ???????????????????}
 ???????????????]
 ???????????},
 ???????????{
 ???????????????test: /\.less$/,
 ???????????????use: [
 ???????????????????{
 ???????????????????????loader: ‘style-loader‘
 ???????????????????},
 ???????????????????{
 ???????????????????????loader: ‘css-loader‘
 ???????????????????},
 ???????????????????{
 ???????????????????????loader: ‘less-loader‘
 ???????????????????}
 ???????????????]
 ???????????}
 ???????]
 ???},
 ???plugins: [
 ???????new HtmlWebpackPlugin({
 ???????????title: ‘Output Management‘
 ???????})
 ???]
};

这里我们将我们的入口点指定为我们当前目录中的index.ts，一个名为bundle.js的输出文件和我们的TypeScript加载器，负责将我们的TypeScript文件编译为JavaScript。 我们还添加resolve.extensions来指示webpack在解析Typescript模块时使用什么文件扩展名。

Typescript loaders

目前有两种可用于TypeScript的loaders：

• awesome-typescript-loader

• ts-loader

令人敬畏的TypeScript加载程序创建了一个awesome-typescript-loader和ts-loader之间的区别精彩的解释。

您可以在这里阅读更多。 在本指南中，我们将使用ts-loader，因为更容易实现其他Webpack功能，例如将非代码资源导入到项目中。

启用源映射

为了启用源映射，我们首先必须配置TypeScript以将内联源映射输出到我们编译的JavaScript文件中。这通过将sourceMap属性设置为true来完成.

tsconfig.json

{ ?"sourceMap": true}

一旦将TypeScript配置为输出源映射，我们需要告诉webpack提取这些源映射并将其传递给浏览器，这样我们就可以在我们的代码编辑器中看到源文件。

webpack.config.js

module.exports = { entry: ‘./index.ts‘, output: { ??filename: ‘bundle.js‘, ??path: __dirname }, 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‘,};

首先我们添加一个名为source-map-loader的新加载器。

要安装它运行：

npm install --save-dev source-map-loader

一旦加载程序安装，我们需要告诉webpack我们要在任何其他加载程序之前使用enforce：‘pre‘配置标志来运行这个加载程序。 最后，我们需要通过指定devtool属性来启用webpack中的源映射。 目前我们使用‘inline-source-map‘设置来阅读有关此设置的更多信息，并查看其他选项，以查看devtool文档。

使用第三方库

从npm安装第三方库时，请务必记住安装该库的typing定义。

您可以从@types存储库,安装第三方库定义。

例如，如果我们要安装lodash，我们可以运行以下命令来获取它的输入：

npm install --save-dev @types/lodash

有关更多信息，请参阅此博文

导入非代码部分资源

要使用TypeScript的非代码资源，我们需要告诉TypeScript如何推迟这些导入的类型。

为此，我们需要创建一个custom.d.ts文件。 此文件表示我们项目中TypeScript的自定义定义。

在我们的custom.d.ts文件中，我们需要为svg导入提供一个定义，为此，我们需要将以下内容放在此文件中：

declare module "*.svg" { ?const content: any; ?export default content;}

在这里，我们通过指定任何以.svg结尾的导入，为svg声明一个新模块，并将该模块的类型定义为any。 如果我们想要更明确地说这是一个url，我们可以将类型定义为字符串。

这不仅适用于svg，而且还适用于您可能希望使用的任何自定义加载器，包括css，scss，json或您可能希望在项目中加载的任何其他文件。