前端开发的重要工具之一就是构建工具。其中，Webpack 作为目前流行的构建工具之一，为前端工程自动化提供了极大的帮助。与此同时，Angular 是一个开源的 Web 应用框架，它也是目前前端开发中最流行的框架之一。本文将介绍一个名为 angular-webpack-config 的 npm 包，它提供了一种简单的设置 Angular 与 Webpack 的融合配置的方法。本文将介绍如何安装、如何使用以及如何在实际项目中应用。
安装
需要注意的是，angular-webpack-config 只适用于 Angular v5 及以上版本。
打开终端，在项目文件夹中执行以下命令即可安装 angular-webpack-config：
--- ------- ---------------------- ----------
使用
安装完成后，在项目根目录下创建一个新文件，例如 webpack.config.js。在这个文件中打开 Node.js 的 CommonJS 模块语法，并引入 angular-webpack-config。如下面这个例子：
----- -------------------- - ----------------------------------
在这个文件中，你可以使用 AngularWebpackConfig 实例对象，进行提交到 Webpack 的配置项。
----- -------------------- - ----------------------------------
-- --------
----- ------------ - -------------------- -----
-- ------- ----
----- --------------- ----------------------- - -
------ -
----- ----------------------- ------ -----------
--
-- --- -- ------- --
--
-- -------------------- -----
----- -------------------- - --- ------------------------------------ --------------在具体设置方面，良好的实践是将通用配置和特定环境的差异分离开来。可以将多个配置文件分别存储在 webpackCommonConfig.ts、webpackDevConfig.ts 和 webpackProdConfig.ts 中，并使用 webpack-merge 将不同的配置文件合并。示例代码如下：
----- ------- ----------------------------- - -
-- --- --- ------- --
--
----- ---- ----------------------------- - -
-- --- ----- ------- --
--
----- ----- ----------------------------- - -
-- --- ----- ------- --
--
-------------- - -
----
-----
----------- -------
-- -- ------- ---------------------------- -- --------------------- -- ----- ----- ----集成到 Angular
最后，在 Angular CLI 构建出来的 Angular 应用中，需要在 package.json 文件中添加以下代码：
---------- -
-------- --- ----- --------
-------- --- ------
--然后在终端执行以下命令：
--- --- -----
这将构建出最终的 JavaScript 代码。你可以选择将打包后的代码使用 FTP 上传至你的网站，并在任何的 Web 服务器上运行它。
总结
上述正是使用 angular-webpack-config 配置 Angular 与 Webpack 的基本方法，当然还有很多其他的配置选项。本文仅仅是介绍基本的用法，如果想深入学习，可以参阅文档。
掌握了这种组合，你就已经做到了前端工程自动化的一步。在实际项目中，你可以按需求自行添加或删除配置项，以适合你的实际开发需要。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065b4ac6eb7e50355dbfd5