介绍
Angular 是一款流行的前端框架，但是在使用 Angular 开发应用程序时，难免会遇到需要打包应用程序的情况。Webpack 是一款流行的模块打包工具，可以帮助我们将 Angular 应用程序打包为一个或多个静态资源文件。本文将手把手地介绍如何使用 Webpack 打包 Angular 项目。
准备工作
在开始使用 Webpack 打包 Angular 项目之前，我们需要先安装 Node.js 和 Angular CLI。Node.js 是一种用于构建 JavaScript 应用程序的平台，而 Angular CLI 则是一个命令行界面工具，用于快速创建和管理 Angular 应用程序。
安装 Node.js 可以前往官方网站下载最新版本的 Node.js 并安装。安装 Angular CLI 可以使用以下命令：
npm install -g @angular/cli
创建 Angular 项目
接下来，我们需要创建一个新的 Angular 项目。使用以下命令创建一个名为 my-app 的新项目：
ng new my-app
这个命令会在当前目录下创建一个新的 Angular 项目，然后安装项目所需的依赖项。可以使用以下命令进入项目目录：
cd my-app
现在，我们可以使用以下命令启动 Angular 应用程序：
ng serve
这个命令会启动一个开发服务器，并在浏览器中打开应用程序。可以通过访问 http://localhost:4200 查看应用程序。
添加 Webpack
Angular CLI 包含了 Webpack，并以其为基础来构建和打包应用程序。但是，默认情况下，Angular CLI 隐藏了 Webpack 配置文件。如果需要修改 Webpack 配置文件，可以使用以下命令：
ng eject
这个命令会将 Angular CLI 生成的默认配置文件暴露出来，然后我们就可以手动修改它们了。
你可以通过以下命令使用 @angular-builders/custom-webpack 添加 Webpack：
ng add @angular-builders/custom-webpack
这个命令会执行一些操作，包括添加一些依赖项和在项目根目录下创建一个 webpack.config.js 文件。
配置 Webpack
现在，我们就可以开始配置 Webpack 了。在 webpack.config.js 文件中，可以使用以下代码：
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
-------- -
--- -------------------------------------------
--
------------- -
------------ -
------- ------
--
-
--这个配置文件包含了两个选项：plugins 和 optimization。plugins 选项指定 Webpack 插件，其中 AggressiveMergingPlugin 用于合并模块，并生成最小代码。optimization 选项指定 Webpack 优化配置，其中 splitChunks 用于分割代码，并生成多个文件。
打包 Angular 应用程序
现在，我们就可以使用 Webpack 打包 Angular 应用程序了。使用以下命令将应用程序打包为一个静态资源文件：
ng build --prod
这个命令会将应用程序的代码打包到 dist 目录中。可以使用以下命令查看应用程序的大小：
ls -alh dist
这个命令会列出 dist 目录中所有文件的大小，包括 Angular 应用程序的大小。
结论
在本文中，我们介绍了如何使用 Webpack 打包 Angular 项目。首先，我们需要安装 Node.js 和 Angular CLI。然后，我们创建了一个新的 Angular 项目，并在其中添加了 Webpack。最后，我们配置了 Webpack 并使用它打包了 Angular 应用程序。希望这篇文章可以对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677632016d66e0f9aa0b606e