前言
随着 Web 技术的不断发展，前端开发中出现了越来越多的工具和框架，其中 Angular 是一个很受欢迎的前端开发框架。而 TypeScript 则是一种开源的 JavaScript 超集，提供了类型系统等功能，被越来越多的开发者选择使用。
本文将介绍如何通过 Webpack 打包使用 TypeScript 编写的 Angular 应用。
步骤
1. 安装依赖
首先，需要安装以下依赖：
npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin clean-webpack-plugin copy-webpack-plugin ts-loader css-loader file-loader html-loader mini-css-extract-plugin npm install --save-dev @angular/core @angular/compiler @angular/platform-browser @angular/platform-browser-dynamic @angular/common @angular/router @angular/forms rxjs npm install --save-dev typescript
其中，webpack 是 Webpack 的核心依赖，webpack-cli 提供了一些命令行工具，webpack-dev-server 可以启动一个本地开发服务器，html-webpack-plugin 可以为打包后的文件生成一个 HTML，并自动引入打包后的文件，clean-webpack-plugin 可以清除打包文件夹中的文件，copy-webpack-plugin 可以复制一些文件到打包目录，ts-loader 可以让 Webpack 处理 TypeScript 文件，css-loader 可以让 Webpack 处理 CSS 文件，file-loader 可以让 Webpack 处理文件资源，html-loader 可以让 Webpack 处理 HTML 文件，mini-css-extract-plugin 可以把 CSS 提取成独立的文件。
另外，@angular 和 rxjs 是 Angular 的依赖，typescript 是 TypeScript 的依赖。
2. 配置 TypeScript
在项目根目录下，创建一个 tsconfig.json 文件，用于配置 TypeScript：
-- -------------------- ---- -------
-
------------------ -
--------- ---------
--------- ---------
------------------ -----
------------ -----
-------------- -----
--------- -----------------
--------- -----
-------------------- -----
---------------- -----
------------------- -------
------------------------- -----
------------------------ -----
--------------- -----
----------------------------------- ----
--
---------- -
--------------
-
-其中，target 指定编译成的 JavaScript 版本，module 指定编译后的模块格式，这里使用了 ES2015，outDir 指定编译后的输出目录，这里指定为 ./dist/out-tsc。
3. 配置 Webpack
在项目根目录下，创建一个 webpack.config.js 文件，用于配置 Webpack：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- - ------------------ - - --------------------------------
----- ----------------- - -------------------------------
----- -------------------- - -----------------------------------
-------------- - -
------ ----------------
------- -
----- ----------------------- --------
--------- ------------
--
-------- -
----------- ------- -------
--
------- -
------ -
-
----- --------
---- ------------
-------- ---------------
--
-
----- ----------
---- --------------
--
-
----- ---------
---- -
----------------------------
-------------
--
--
-
----- -----------------------
---- -
--------------
--
--
--
--
-------- -
--- -------------------
--------- -------------------
--------- -------------
---
--- ---------------------
--- -------------------
--------- -
- ----- --------------- --- ---------- --
--
---
--- ----------------------
--------- ------------
---
--
---------- -
------------ -------------------- --------
--------- -----
----- -----
----- -----
--
--其中，entry 指定入口文件，这里为 ./src/main.ts，output 指定输出目录和文件名，这里为 ./dist/bundle.js，resolve 指定模块的后缀名，这里为 .ts 和 .js。
module 的 rules 用于配置文件处理规则。首先，有一个 .ts 文件的规则，使用 ts-loader 处理，exclude 排除 node_modules。然后，有一个 .html 文件的规则，使用 html-loader 处理。接着，有一个 .css 文件的规则，使用 css-loader 处理，并通过 MiniCssExtractPlugin.loader 将 CSS 提取成独立的文件。最后，有一个文件资源的规则，使用 file-loader 处理。
plugins 中有四个插件：HtmlWebpackPlugin 用于生成 HTML 文件，CleanWebpackPlugin 用于清除打包目录，CopyWebpackPlugin 用于复制一些文件到打包目录，MiniCssExtractPlugin 用于将 CSS 提取成独立的文件。
devServer 是本地开发服务器的配置，contentBase 指定本地服务的根目录，这里为 ./dist，compress 开启 gzip 压缩，port 指定端口，open 是否自动打开浏览器。
4. 编写 Angular 应用
在 src 目录下，创建一个 app 目录，用于存放 Angular 应用的组件。比如，创建一个 app.component.html 文件：
<h1>Hello, world!</h1>
创建一个 app.component.ts 文件：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {}在 src 目录下，创建一个 main.ts 文件，用于启动 Angular 应用：
-- -------------------- ---- ------- ------ - -------------- - ---- ---------------- ------ - ---------------------- - ---- ------------------------------------ ------ - --------- - ---- ------------------- ------ - ----------- - ---- ----------------------------- -- ------------------------ - ----------------- - --------------------------------------------------- ---------- -- --------------------
其中，AppModule 是 Angular 应用的根模块，需要另外创建，这里不再详细介绍。
在 src 目录下，创建一个 index.html 文件：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- -------------- ----------- ------- ------ --------------------- ------- -------
5. 执行打包命令
在命令行中，执行以下命令：
npm run build
将会执行打包命令。打包后的文件会生成在 ./dist 目录下。
6. 启动本地服务器
在命令行中，执行以下命令：
npm run start
将会启动本地开发服务器，通过访问 http://localhost:9000，可以查看打包后的应用。
总结
本文介绍了如何通过 Webpack 打包使用 TypeScript 编写的 Angular 应用，包括安装依赖、配置 TypeScript 和 Webpack、编写 Angular 应用、执行打包命令和启动本地服务器等步骤。希望本文对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6495979448841e98942b664c