当我们开始使用 AngularJS 并且需要将项目构建成一个可部署的版本时，使用 Webpack 来打包是一个不错的选择。本文将介绍几种不同的方式来使用 Webpack 打包一个 AngularJS 项目，从而提供多种选择和指南。
基本的 Webpack 配置
首先，让我们来看一下基础的 Webpack 配置，如下：
----- ---- - ----------------
-------------- - -
------ -----------
------- -
----- ----------------------- --------
--------- -----------
--
------- -
------ -
-
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
--上面的配置简单，但包含了一些常见的配置项。我们为一个名称为 app.js 的文件设置了入口点。Web 版本的文件将被输出到 dist 目录中，文件名为 bundle.js。我们使用了 Babel 来编译我们编写的 ES6+ 代码。
配置多个入口点
当您的项目较大时，您可能希望拆分代码并使用多个入口点。下面是一个示例可以帮助您做到这一点：
----- ---- - ----------------
-------------- - -
------ -
---- -----------
-------- --------------
--
------- -
----- ----------------------- --------
--------- ------------------
--
------- -
------ -
-
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
--在上述代码中，我们定义了两个入口点：app.js 和 vendors.js。输出的文件名会根据入口点的名称自动生成。如果您运行 Webpack，它将生成两个输出文件：app.bundle.js 和 vendors.bundle.js。
加载 CSS
当您的项目包含 CSS 时，您需要使用 style-loader 和 css-loader。
----- ---- - ----------------
-------------- - -
------ -
---- -----------
-------- --------------
--
------- -
----- ----------------------- --------
--------- ------------------
--
------- -
------ -
-
----- ---------
---- -
---------------
------------
-
--
-
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
--上述代码中，我们新增了一个针对 .css 文件的匹配规则。
加载图像和字体
当您的项目包含图像和字体资源时，您需要使用 file-loader。
-------------- - -
------ ------
------- ------
------- -
------ -
-
----- -----------------------
---- -------------
--
-
----- ------------------------------
---- -------------
--
-
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
--上述代码中，我们为了匹配 .png、.svg、.jpg、.gif 这些图像类型和 .woff、.woff2、.eot、.ttf、.otf 这些字体类型，新增了两个匹配规则。
加载 HTML 模板
当您想要将 HTML 模板作为 Angular 组件的模板时，您需要使用 html-loader。
-------------- - -
------ ------
------- ------
------- -
------ -
-
----- ----------
---- -------------
--
-
----- -----------------------
---- -------------
--
-
----- ------------------------------
---- -------------
--
-
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
--上述代码中，我们新增了一个匹配规则，用于将 .html 文件用作 Angular 组件的模板。
结论
本文介绍了使用 Webpack 打包一个 AngularJS 项目需要的一些基本配置和技巧，包括多个入口点、CSS、图像和字体、HTML 模板等的加载规则。希望您有所收获，感谢阅读。
参考
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67330a4c0bc820c582402d8c