TypeScript 如何配置 webpack？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，webpack 是一个十分常用的构建工具，它可以将各种不同的资源（如 JavaScript、CSS、图片等）打包成一个或多个静态资源文件。而 TypeScript 则是一种类型安全的 JavaScript 的超集，可在大型项目中提供更好的代码可读性、可维护性和安全性。

在使用 TypeScript 进行前端开发的过程中，我们经常会遇到需要将 TypeScript 代码打包成为浏览器可识别的 JavaScript 代码。本文将向你介绍如何配置 webpack，使其可以支持 TypeScript。

安装依赖

在开始之前，请确保你已经安装好了以下的开发依赖：

webpack
webpack-cli
ts-loader：用于解析 TypeScript 代码的 loader
typescript
@types/node：提供 Node.js 相关的类型声明文件

安装方式可以通过 npm 或 yarn 来实现，例如：

npm install webpack webpack-cli ts-loader typescript @types/node --save-dev

webpack 配置

接下来，我们需要创建 webpack 配置文件 webpack.config.js。

// www.javascriptcn.com code example
module.exports = {
  entry: './src/index.ts',
  // 输出文件
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  resolve: {
    // 添加 .ts 和 .tsx 后缀
    extensions: ['.ts', '.tsx', '.js']
  },
  module: {
    rules: [
      // 添加针对 .ts 和 .tsx 文件的 loader
      { 
        test: /\.tsx?$/, 
        loader: 'ts-loader',
        exclude: /node_modules/ 
      }
    ]
  }
};

在此配置中，我们告诉 webpack，入口文件是 src/index.ts，输出文件名为 bundle.js，输出路径为 dist 目录。我们同时还添加了一个 resolve 属性，用于解析文件后缀名。

最后，我们添加了一个针对 .ts 和 .tsx 文件的 loader，即 ts-loader，并且将 node_modules 目录中的文件排除在外。这意味着我们不会对第三方库中的 TypeScript 代码进行编译。

tsconfig.json 配置

在 TypeScript 项目中，我们必须编写与之匹配的 tsconfig.json 文件，以定义 TypeScript 编译器如何编译我们的代码。下面是一个示例 tsconfig.json 文件，用于支持 webpack 编译 TypeScript：

// www.javascriptcn.com code example
{
  "compilerOptions": {
    "declaration": false,
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "./dist",
    "sourceMap": true,
    "target": "es5"
  },
  "include": ["./src/**/*"],
  "exclude": ["node_modules", "**/*.test.ts"]
}

compilerOptions

我们首先需要配置 TypeScript 编译器选项，如下所示：

declaration: 是否生成类型声明文件，设置为 false，不生成
module: 代码模块化方式，设置为 commonjs，让 TypeScript 输出 commonjs 模块化的代码，以便 webpack 进行打包
moduleResolution: 模块解析方式，设置为 node，以便 TypeScript 可以使用 Node.js 的解析方式进行模块解析
outDir: 输出目录，设置为 dist，在 webpack 构建代码时会自动编译到该目录中
sourceMap: 是否生成 source map 文件，用于调试代码
target: 编译输出的 JavaScript 代码版本，我们使用 ES5

include 和 exclude

include 和 exclude 属性分别用于指定需要编译的文件和排除的文件。在我们的示例中，我们告诉 TypeScript，编译的范围是 src 目录下的所有文件，但不包括 node_modules 目录和以 .test.ts 结尾的测试文件。

示例代码

现在，我们可以通过一个简单的示例来测试一下我们的 webpack 配置是否正确。

我们创建一个名为 src/index.ts 的文件，并添加以下代码：

function greet(name: string) {
  return `Hello, ${name}!`;
}

console.log(greet('TypeScript'));

代码很简单，它定义了一个名为 greet 的函数，并在控制台中输出了它的返回值。

最后，我们使用以下命令来运行 webpack，生成打包后的文件：

webpack --mode=development

现在，我们可以在浏览器中打开 dist/index.html 文件，并在控制台中看到输出结果：

Hello, TypeScript!

恭喜，你已经成功地将 TypeScript 代码打包为浏览器可识别的 JavaScript 代码。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d6a4b7a941bf7134c6bd01

TypeScript 如何配置 webpack？