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