《十一》使用 Webpack 打包 TypeScript 代码

原创已于 2025-02-11 16:20:21 修改 · 589 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#TypeScript

于 2021-12-28 18:29:50 首次发布

TypeScript 专栏收录该内容

13 篇文章

订阅专栏

本文档介绍了如何创建一个typescript-test项目，包括设置index.html和src/index.ts文件，然后通过npm初始化package.json，安装webpack、webpack-cli、typescript和ts-loader等依赖。接着配置webpack.config.js，使用tsc生成tsconfig.json，并通过webpack打包index.ts生成dist/bundle.js。最后，运行index.html查看结果。

新建一个 typescript-test 文件夹，并新建 index.html 文件和 src/index.ts 文件。

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
	<!-- 引入打包后生成的 JS 文件 -->
	<script src="../dist/bundle.js"></script>
</body>
</html>

// src/index.ts
let name:string = 'Lee'
console.log(name.length)

进入文件夹的根目录，执行 npm init 生成 package.json 配置文件，用来记录项目的名称、版本、依赖包等信息。
执行 npm install webpack webpack-cli typescript ts-loader -D 安装依赖包。

webpack：是 webpack 的核心包；
webpack-cli：是 webpack 的命令行工具，安装之后就可以通过命令行去使用 webpack；
typescript：是 typescript 的核心包；
ts-loader：通过 ts-loader 可以将 webpack 和 typescript 进行一个整合，typescript 编译器才可以在 webpack 中使用。

新建 Webpack 配置文件 webpack.config.js。

// 引入 Node 内置的 path 模块
const path = require("path")

module.exports = {
  // 指定入口文件
  entry: "./src/index.ts",
  // 指定出口
  output: {
      // 指定打包后文件所在的目录
    path: path.resolve(__dirname, "./dist"),
    //  指定打包后的文件名
    filename: "bundle.js",
  },
 resolve: {
    // 加载模块可以省略后缀名，Webpack 会自动根据这个规则来查找
    extensions: ['.ts', '.js', 'cjs', '.json'],
  },
  module: {
    // 指定加载的规则
    rules: [
      {
        // 指定规则生效的文件
        test: /\.ts$/,
        // 指定如何处理匹配到的文件
        use: "ts-loader",
      }
    ]
  },
}

执行 tsc--init 生成 TS 配置文件 tsconfig.josn 。

ts-loader 需要根据 tsconfig.josn 配置文件中的配置来编译 TS 代码。
执行 webpack 即可打包 index.ts 文件，生成 /dist/bundle.js 文件。
运行 index.html 即可查看到效果。