TypeScript

TypeScript 是 JavaScript 的超集，为其增加了类型系统。TypeScript 可以被编译为普通的 JavaScript 代码。这篇指南将会介绍如何在 webpack 中集成 TypeScript。

基础配置

首先，执行以下命令安装 TypeScript 编译器和 loader：

npm install --save-dev typescript ts-loader

现在，我们将修改目录结构和配置文件：

project

  webpack-demo   |- package.json   |- package-lock.json + |- tsconfig.json   |- webpack.config.js   |- /dist     |- bundle.js     |- index.html   |- /src     |- index.js +   |- index.ts   |- /node_modules

tsconfig.json

这里我们添加一个基本的配置以支持 JSX，并将 TypeScript 编译到 ES5……

{   "compilerOptions": {     "outDir": "./dist/",     "noImplicitAny": true,     "module": "es6",     "target": "es5",     "jsx": "react",     "allowJs": true,     "moduleResolution": "node"   } }

参阅 TypeScript 官方文档 了解更多关于 tsconfig.json 配置选项的信息。

参阅 配置 了解更多关于 webpack 配置的信息。

现在，配置 webpack 处理 TypeScript：

webpack.config.js

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'),   }, };

上面的配置将会指定 ./src/index.ts 为入口文件，并通过 ts-loader 加载所有 .ts 和 .tsx 文件，并在当前目录 输出 一个 bundle.js 文件。

由于 lodash 没有默认导出，因此现在需要修改 lodash 在 ./index.ts 文件中的引入。

./index.ts

- import _ from 'lodash'; + import * as _ from 'lodash';    function component() {     const element = document.createElement('div');      element.innerHTML = _.join(['Hello', 'webpack'], ' ');      return element;   }    document.body.appendChild(component());

loader

ts-loader

在本指南中，我们使用 ts-loader，因为它能够很方便地启用额外的 webpack 功能，例如将其他 web 资源导入到项目中。

请注意，如果已经使用 babel-loader 转译代码，可以使用 @babel/preset-typescript 以让 Babel 处理 JavaScript 和 TypeScript 文件，而不需要额外使用 loader。请记住，与 ts-loader 相反，底层的 @babel/plugin-transform-typescript 插件不执行任何类型检查。

source map

参阅 开发环境 指南了解更多关于 source map 的信息。

我们需要对 TypeScript 进行配置以启用 source map，从而实现将内联的 source map 输出到编译后的 JavaScript 文件。必须在 TypeScript 配置中添加下面这行：

tsconfig.json

  {     "compilerOptions": {       "outDir": "./dist/", +     "sourceMap": true,       "noImplicitAny": true,       "module": "commonjs",       "target": "es5",       "jsx": "react",       "allowJs": true,       "moduleResolution": "node",     }   }

现在，我们需要告诉 webpack 提取这些 source map，并内联到最终的 bundle 中。

webpack.config.js

  const path = require('path');    module.exports = {     entry: './src/index.ts', +   devtool: 'inline-source-map',     module: {       rules: [         {           test: /\.tsx?$/,           use: 'ts-loader',           exclude: /node_modules/,         },       ],     },     resolve: {       extensions: [ '.tsx', '.ts', '.js' ],     },     output: {       filename: 'bundle.js',       path: path.resolve(__dirname, 'dist'),     },   };

查看 devtool 文档以了解更多信息。

客户端类型

你可以在 TypeScript 代码中使用 webpack 特定的特性，比如 import.meta.webpack。只需要添加 TypeScript reference 声明，webpack 便会为它们提供类型支持：

/// <reference types="webpack/module" /> console.log(import.meta.webpack); // 没有上面的声明的话，TypeScript 会抛出一个错误

使用第三方库

在从 npm 安装第三方库时，一定要记得同时安装此库的类型声明文件。你可以从 TypeSearch 中找到并安装这些第三方库的类型声明文件。

举个例子，如果想安装 lodash 类型声明文件，可以运行下面的命令：

npm install --save-dev @types/lodash

参与 这篇文章 以了解更多。

导入其他资源

想要在 TypeScript 中使用非代码资源，需要告诉 TypeScript 推断导入资源的类型。在项目里创建一个 custom.d.ts 文件，这个文件用来表示项目中 TypeScript 的自定义类型声明。我们为 .svg 文件设置一个声明：

custom.d.ts

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

在这里我们通过指定任何以 .svg 结尾的导入，将 SVG 声明为一个新的模块，并将模块的 content 定义为 any。我们可以通过将类型定义为字符串，来更加显式地将它声明为一个 url。同样的概念适用于其他资源，包括 CSS，SCSS，以及 JSON 等。

构建性能

参阅 构建性能 以了解更多关于构建性能的信息。