好的，我会根据提供的英文源文档，创作一份专业、结构清晰的中文技术教程。以下是教程的正文部分。

TypeScript

本指南源自 起步指南。

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

基本设置

首先，运行以下命令安装 TypeScript 编译器和加载器：

npm install --save-dev typescript ts-loader

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

项目结构

 webpack-demo
  ├── package.json
  ├── package-lock.json
+ ├── tsconfig.json
- ├── webpack.config.js
+ ├── webpack.config.ts
  ├── /dist
  │   ├── bundle.js
  │   └── index.html
  ├── /src
- │   ├── index.js
+ │   └── index.ts
  └── /node_modules

tsconfig.json

让我们设置一个配置文件，以支持 JSX 并将 TypeScript 编译为 ES5...

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "target": "esnext",
    "jsx": "react-jsx",
    "allowJs": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

欲了解 tsconfig.json 配置选项的更多信息，请参阅 TypeScript 文档。

欲了解 webpack 配置的更多信息，请参阅 配置概念。

现在，让我们配置 webpack 以处理 TypeScript：

首先，安装所需的依赖项：

npm install --save-dev ts-node @types/node

webpack.config.ts

import path from "node:path";
import { fileURLToPath } from "url";
import webpack from "webpack";

// 防止配置 `devServer` 时出现任何 TypeScript 错误
import "webpack-dev-server";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const config: webpack.Configuration = {
  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"),
  },
};

export default config;

有关如何在 TypeScript 文件 中编写配置的更多信息，请参阅相关文档。

这将指示 webpack 从 ./index.ts 文件_进入_，通过 ts-loader_加载_所有 .ts 和 .tsx 文件，并在当前目录下_输出_一个 bundle.js 文件。

接下来，我们需要调整在 ./index.ts 中导入 lodash 的方式。由于 lodash 的类型定义不包含默认导出，因此我们需要更新导入语句。
首先，确保已安装 TypeScript 定义：

npm install --save-dev @types/lodash

然后，更新文件顶部的导入语句：

./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());

T> 若要让这些导入默认如此行为，并继续在 TypeScript 中使用 import _ from 'lodash'; 语法，请在 tsconfig.json 文件中设置 "allowSyntheticDefaultImports": true 和 "esModuleInterop": true。这涉及到 TypeScript 的配置，此处提及仅供您参考。

在 webpack.config.ts 中使用 TypeScript 的方法

在 webpack.config.ts 中使用 TypeScript 有三种方式：

1. 使用 webpack 内置的 Node.js 类型剥离功能（推荐）：

   bash 复制代码

   webpack -c ./webpack.config.ts

   将尝试使用 Node.js 内置的 类型剥离 功能加载配置，然后尝试使用 interpret 和 rechoir 加载配置文件（在这种情况下，您需要安装 tsx 或 ts-node 或其他工具）。

2. 为 Node.js 使用自定义的 --import/--require：

   bash 复制代码

   NODE_OPTIONS='--import=tsx --no-experimental-strip-types'  webpack -c ./webpack.config.ts

   bash 复制代码

   NODE_OPTIONS='--require=ts-node/register --no-experimental-strip-types'  webpack -c ./webpack.config.ts

   从 Node.js 22.7.0 版本开始，需要使用 --no-experimental-strip-types 标志。

3. 为 Node.js ≥ v22.7.0 使用内置的 Node.js 转换类型功能：

   启用需要生成 JavaScript 代码的不可擦除 TypeScript 语法（例如枚举声明、参数属性）的转换。

   bash 复制代码

   NODE_OPTIONS='--experimental-transform-types' webpack --disable-interpret -c ./webpack.config.ts

TypeScript 路径别名

export default {
  resolve: {
    tsconfig: true, // 自动查找 tsconfig.json
  },
};

export default {
  resolve: {
    tsconfig: "./tsconfig.app.json",
  },
};

export default {
  resolve: {
    tsconfig: {
      configFile: "./tsconfig.json",
      references: "auto", // 从 tsconfig 继承引用，或传递路径数组
    },
  },
};

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

- import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';

  export default {
    resolve: {
-     plugins: [new TsconfigPathsPlugin()],
+     // 在项目根目录自动查找 tsconfig.json
+     tsconfig: true,
+
+     // 或显式指定一个
+     // tsconfig: './tsconfig.app.json'
    },
  };

npm uninstall tsconfig-paths-webpack-plugin

  {
    "compilerOptions": {
      "outDir": "./dist/",
+     "sourceMap": true,
      "noImplicitAny": true,
      "module": "esnext",
      "moduleResolution": "bundler",
      "target": "esnext",
      "jsx": "react-jsx",
      "allowJs": true,
  },
    "include": ["src/**/*"],
    "exclude": ["node_modules"]
  }

 import path from "node:path";
 import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

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

/// <reference types="webpack/module" />
console.log(import.meta.webpack); // 如果没有上述引用声明，TypeScript 将抛出错误

  {
    "compilerOptions": {
      "types": [
+       "webpack/module"
      ]
    }
  }

npm install --save-dev @types/lodash

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