在 Web 开发领域中，Webpack 作为一个强大的模块打包工具，已成为事实上的标准。它能够将开发中的多个模块打包成单个文件，不仅减少了 HTTP 请求的数量，而且还能够处理代码分割和懒加载等复杂的问题。在本文中，我们将介绍如何使用 Webpack 搭建一个简单的 Angular 项目。
准备工作
在开始之前，我们需要安装 Node.js 和 npm 包管理器。在安装完之后，我们可以使用以下命令来验证安装是否成功：
---- -- --- --
接下来，我们需要安装 webpack 和 webpack-cli 来全局安装 Webpack 的命令行工具。我们可以使用以下命令来安装：
--- ------- -- ------- -----------
创建项目
我们可以使用 Angular CLI 来创建项目的基础结构。在终端中，我们可以运行以下命令来创建项目：
-- --- -------------
这将会创建一个名为 ng-quickstart 的项目，并根据提示安装依赖项。
配置 Webpack
我们现在需要创建一个 Webpack 配置文件。在项目的根目录下，创建名为 webpack.config.js 的文件，并添加以下内容：
----- ---- - ----------------
-------------- - -
------ ----------------
------- -
----- -------------------- ---------
--------- -----------
--
-------- -
----------- ------- ------
--
------- -
------ -
-
----- --------
---- ------------
-------- --------------
-
-
--
---------- -
------------ -------------------- --------
--------- -----
----- ----
-
--我们可以在 entry 属性中指定入口文件，然后在 output 属性中指定输出目录和输出文件名。而在 resolve 属性中，我们则可以让 Webpack 解析 .ts 和 .js 文件。最后，我们需要在 module 属性中添加一个规则，用来告诉 Webpack 如何处理 TypeScript 文件。此外，我们还添加了一个 devServer 配置，用来启动一个简单的开发服务器。
更改主模块文件
默认情况下，Angular CLI 会生成一个名为 main.ts 的主模块文件。我们需要更改该文件，以便它可以被 Webpack 打包。
我们可以使用以下内容来更改文件，并添加一个简单的 Angular 组件：
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------ ----- -------
-
--
------ ----- ------------ -
----- - -------- - ---------
-最后，我们还需要将该组件添加到 app.module.ts 中：
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
-------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -运行应用程序
现在，我们可以使用以下命令来编译和运行我们的应用程序：
------- -------- ----------------- -- -- -----
这将会编译 TypeScript 代码并将其打包到 dist/bundle.js 中。接下来，Ng CLI 将启动开发服务器，并使用我们之前添加的 app-root 组件作为应用程序的入口点。
我们可以在浏览器中访问 http://localhost:4200，并看到我们的应用程序在运行中。
结论
在本文中，我们学习了如何使用 Webpack 搭建一个简单的 Angular 项目。我们了解了如何创建一个基本的 Webpack 配置文件，并演示了如何打包 Angular 应用程序。
值得注意的是，本文只是一个基础的引导，对于更复杂的项目来说，我们需要使用更为丰富的配置文件和插件。同时， Ng CLI 也提供了大量的默认配置和命令，可以让我们更为高效地开发 Angular 应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6721af802e7021665e0879fd