在现代前端开发中，构建工具已经变得异常重要。Webpack 就是其中最常见最流行的构建工具之一。而在 Angular 应用的开发中，我们常常需要定制化 Angular-CLI 提供的一些构建步骤，来满足项目特定的需求。那么，这时候就需要用到 npm 包 @angular-builders/custom-webpack 了。
简介
@angular-builders/custom-webpack 是一款基于 Angular-CLI 的 webpack 定制化工具。它可以帮助我们在项目构建（build）过程中通过 webpack 插件与配置，增加、改变、删除一些构建步骤。甚至，它还可以使我们完全抛弃现有 Angular-CLI 的 build 流程，自己来设计完全定制化的构建过程。
安装
安装 @angular-builders/custom-webpack 的命令非常简单：
npm i -D @angular-builders/custom-webpack
安装完毕后，我们需要在 angular.json 中引入它，比如：
-- -------------------- ---- -------
-
----------- -
--------- -
------------ -
-------- -
---------- -------------------------------------------
---------- -
---------------------- -
------- --------------------------
--
-- ---
-
--
-- ---
-
--
-- ---
--
-- ---
-这样一来，我们的 ng build 命令就默认启用了 @angular-builders/custom-webpack，并通过 customWebpackConfig 指定了我们需要使用的 webpack 配置文件。
核心功能
@angular-builders/custom-webpack 提供了以下 3 个核心功能：
1. 配置文件与插件
通常来说，我们在 custom-webpack.config.js 中指定的就是我们自己需要定义的 webpack 配置。比如：
-- -------------------- ---- -------
----- - -------------------- - - ----------------------------
-- ----- ------- ---
-------------- - -
-------- -
--- ----------------------
-- ---
---
-- -------
--
-- ---
--
这样一来，我们的构建步骤就会在 AngularWebpackPlugin 这个 webpack 插件所提供的功能帮助下，执行我们自定义的 webpack 构建步骤。
2. 构建模式选择
除了使用自定义的 webpack 配置之外，我们还可以选择使用官方提供的一些预设的构建模式。比如以下两个：
"@angular-builders/custom-webpack:browser"：使用该模式，我们将会针对 Angular 应用的浏览器端构建；"@angular-builders/custom-webpack:server"：使用该模式，我们将会针对 Angular 应用的服务器端构建；
顾名思义，这两个模式分别对应了浏览器端构建、服务器端构建的场景。我们在使用的时候，需要根据自己的应用环境选择适合的模式。
3. 特定功能项的支持
在某些情况下，我们需要特定的功能，比如 webpack-dev-server 的支持，或是更为复杂的多语言、多环境的功能。针对这些特定的功能，@angular-builders/custom-webpack 也提供了较好的支持，使得我们可以很容易地将特定功能集成到我们的构建工具中去。
比如，要使用 webpack-dev-server，我们只需要在对应的 webpack 配置文件中，添加以下内容：
-- -------------------- ---- -------
-------------- - -
-- ---
---------- -
----- -----
------------ -----
----------------- -----
------ ----------
---- -----
----- -----
----------- ---
--
--这样一来，我们在本地开发时就可以通过 ng serve 命令启动开发服务器了。
当然，更多的功能项支持，请参考 @angular-builders/custom-webpack 的代码库文档。
示例代码
假设我们在开发中，需要使用 typescript 处理 markdown 文件，并将 markdown 文件编成 html。这时候，我们就可以借助 markdown-to-html-pipe-loader 这个 webpack 插件。比如以下 custom-webpack.config.js：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------- -
------ -
-
----- -------
---- --------------------------------
-
-
--
-------- -
----------- ------- -------
------ -
------- ----------------------- ------------
--
--
--这里，我们使用了 markdown-to-html-pipe-loader 这个插件来处理 markdown 文件。并通过 resolve 和 alias 配置，简化了我们在开发中路径的使用。
最后，在 angular.json 的 options 中指定我们加载的 custom-webpack.config.js 文件即可：
-- -------------------- ---- -------
-
----------- -
--------- -
------------ -
-------- -
---------- -------------------------------------------
---------- -
---------------------- -
------- --------------------------
--
-- ---
-
--
-- ---
-
--
-- ---
--
-- ---
-这样一来，我们在进行 ng build 的时候，就会默认使用我们自己写的 custom-webpack.config.js 来处理 markdown 文件，并将其编译成 html 文件了。
总结
@angular-builders/custom-webpack 是一个非常好的 Angular 项目构建工具定制化解决方案。在实际开发中，我们往往需要针对项目的实际情况来对构建工具进行自定义配置，而 @angular-builders/custom-webpack 正好能够帮助我们更好地解决这些问题，使得我们能够自己定制符合项目实际需求的 webpack 配置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/presents-builders-custom-webpack