webpack v4.30.0（14）官方指南说明文档 TypeScript

本指南继续沿用起步指南中的代码示例。 

TypeScript 是 JavaScript 的超集，为其增加了类型系统，可以编译为普通的 JavaScript 代码。这篇指南里我们将会学习 webpack 是如何跟 TypeScript 进行集成。

基础安装

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

npm install --save-dev typescript ts-loader

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

 webpack-demo
  |- package.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
  }
}

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

这会直接将 webpack 的入口起点指定为 ./index.ts，然后通过 ts-loader _加载所有的 .ts 和 .tsx 文件，并且在当前目录输出_一个 bundle.js 文件。

Administrator@PC-20190222QKVD MINGW64 /d/webpack-demo
$ npm install --save-dev typescript ts-loader
npm WARN rollback Rolling back node-pre-gyp@0.12.0 failed (this is probably harmless): EPERM: operation not permitted, scandir 'D:webpack-demonode_modulesfseventsnode_modules'
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.8 (node_modulesfsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.8: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ ts-loader@5.4.5
+ typescript@3.4.5
added 2 packages from 3 contributors and audited 6160 packages in 19.749s
found 0 vulnerabilities

Administrator@PC-20190222QKVD MINGW64 /d/webpack-demo
$ webpack
Hash: f4fd6e65e923ea204830
Version: webpack 4.30.0
Time: 4246ms
Built at: 2019-05-04 14:09:34
    Asset       Size  Chunks             Chunk Names
bundle.js  930 bytes       0  [emitted]  main
Entrypoint main = bundle.js
[0] ./src/index.ts 0 bytes {0} [built]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

Administrator@PC-20190222QKVD MINGW64 /d/webpack-demo
$ 

Loader

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

source map

想要了解 source map 的更多信息，请查看开发指南。
要启用 source map，我们必须配置 TypeScript，以将内联的 source map 输出到编译过的 JavaScript 文件。必须在 TypeScript 配置中添加下面这行：
tsconfig.json

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

现在，我们需要告诉 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 文档以了解更多信息。

使用第三方库

当从 npm 安装第三方库时，一定要牢记同时安装这个库的类型声明文件。你可以从 TypeSearch 中找到并安装这些第三方库的类型声明文件。
举个例子，如果想安装 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 结尾的导入，并将模块的 content 定义为 any，将 SVG 声明一个新的模块。我们可以通过将类型定义为字符串，来更加显式地将它声明为一个 url。同样的理念适用于其他资源，包括 CSS, SCSS, JSON 等。

Administrator@PC-20190222QKVD MINGW64 /d/webpack-demo
$ npm install --save-dev @types/lodash
npm WARN rollback Rolling back node-pre-gyp@0.12.0 failed (this is probably harmless): EPERM: operation not permitted, rmdir 'D:webpack-demonode_modulesfseventsnode_modules'
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.8 (node_modulesfsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.8: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @types/lodash@4.14.123
added 1 package from 9 contributors and audited 6161 packages in 18.787s
found 0 vulnerabilities

Administrator@PC-20190222QKVD MINGW64 /d/webpack-demo
$ webpack
Hash: e0a744103710337d8230
Version: webpack 4.30.0
Time: 2021ms
Built at: 2019-05-04 14:23:30
    Asset      Size  Chunks             Chunk Names
bundle.js  6.86 KiB       0  [emitted]  main
Entrypoint main = bundle.js
[0] ./src/index.ts 0 bytes {0} [built]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

Administrator@PC-20190222QKVD MINGW64 /d/webpack-demo
$ 

构建性能

这可能会降低构建性能。

关于构建工具，请查看构建性能指南。

-------------文档指南完结--------------