Webpack 2.2 中文文档

webpack 和 Typescript

TypeScript 是具有类型系统的 JavaScript 的超集，通过编译转化为普通 JavaScript 代码。这篇指南里我们将会学习 webpack 是如何跟 TypeScript 进行结合。

基础构建

在开始 webpack 和 TypeScript 整合之前，我们首先必须在项目里安装 webpack。如果你还没安装，请查阅 webpack 安装指南。

要能在 webpack 里使用 TypeScript，你需要准备好下面这些事情：

1、在项目里安装 TypeScript 编译器；
2、选择一个 TypeScript loader 安装（这个示例里使用的是 ts-loader）;
3、创建 tsconfig.json 文件，这是 TypeScript 编辑器的配置文件；
4、创建 webpack.config.js 文件，这是 webpack 的配置文件。
你可以通过 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 模块时该检索哪些文件扩展名。

TypeScript loaders

当前有 2 个可用的 TypeScript loader：

Awesome TypeScript loader 文档里已经很好的解释了 awesome-typescript-loader 和 ts-loader 的区别。

可以阅读这篇文章了解更多。

在本指南中，我们将使用 ts-loader，因为它更简便地启用额外的 webpack 功能，例如将非代码资源导入到项目中。

启用 source maps 功能

为了启用 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或是你希望加载到项目中的其他任何文件。

原文：https://webpack.js.org/guides/webpack-and-typescript/

上一篇: 整合 tasktest （任务测试）运行器下一篇: Tree Shaking