在日常的前端开发中，Angular 是一款备受推崇的框架。而 Angular CLI 也是在其中扮演着重要的角色，它可以帮助我们快速生成 Angular 的应用框架，并且提供了一些基础配置。但在实际开发中，我们或许需要对 Angular CLI 生成的默认配置进行修改或自定义，以满足个性化需求。这时，我们不可避免地需要了解如何自定义 Webpack 配置。本文将介绍如何在 Angular CLI 应用上自定义 Webpack 配置，旨在帮助初学者更好地理解。
Webpack 简介
Webpack 是一个现代化的日益流行的 JavaScript 模块打包工具，可以用于打包和优化现代的复杂 Web 应用。它是一个以模块为基础的打包工具，可以把各种开发资源（JavaScript、CSS、图片等）打包成最终的静态资源。Webpack 自带的插件系统非常强大，可以帮助我们实现更多的功能。
自定义 Webpack 配置
在 Angular CLI 中，自定义 Webpack 配置可以通过两种方式实现，即直接修改 Angular CLI 生成的默认配置或者通过 Angular CLI 提供的 Angular.json 配置文件进行配置。
直接修改配置
在生成 Angular 应用后，我们可以查看 node_modules/@angular/cli/models/webpack-configs 目录，这是 Angular CLI 使用的默认 Webpack 配置，我们可以在这里进行直接修改来自定义 Webpack 的配置。
例如，如果我们想要将应用使用的文件大小限制扩大到 5MB，可以在 node_modules/@angular/cli/models/webpack-configs/common.js 文件中进行如下配置：
// ...
module.exports = {
performance: {
hints: false,
maxAssetSize: 5000000, // increase asset size limit to 5MB
},
// ...
};这种方式直接在 node_modules 目录下对配置进行修改，不方便维护和管理，也容易被重置，所以不推荐使用。
使用 Angular.json 配置文件
更好的方式是使用 Angular.json 配置文件进行配置。Angular.json 配置文件位于项目根目录下，可以通过该文件来配置项目的各种属性，其中也包含了用于构建应用的 Webpack 配置项。我们只需要在 Angular.json 文件中添加配置项来实现自定义 Webpack 配置。
例如，我们想要使用 Sass 作为 CSS 预处理器，并且需要添加一些额外的 Loader，可以在 Angular.json 文件的“build”属性中的“options”中进行如下配置：
-- -------------------- ---- -------
-
----------- -
------------- -
------------ -
-------- -
---------- ----------------------------------------
---------- -
--------- -
-----------------
--
---------- ---
--------- ---
--------------------------- -
--------------- -
------------------
-
--
---------------------- -
------- ---------------------------
--
---------------- -
-------- -
------- -
--------------
-----------------
-
--
---------- -
------------- -
------
-----
-
--
--------- -
-------- -
-
------- ----------
------ -
---------------
-------------
-------------
-
--
-
------- ----------
--------- ------------
-
-
-
-
-
-
-
-
-
-在上述配置中，“stylePreprocessorOptions”属性指定 Sass 文件的引用路径，“customWebpackConfig”属性指定了额外的 Webpack 配置文件，“webpackConfig”属性实现了对 Loader 和 Entry 的配置。
总结
通过本文的介绍，我们了解了如何在 Angular CLI 生成的应用上进行 Webpack 自定义配置，既可以直接修改配置，也可以使用 Angular.json 配置文件。对于前端开发者而言，了解这些基础知识，有助于提升我们的个性化开发能力，避免钻入框架的“牢笼”，实现更好的功能和效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64706cec968c7c53b0e8cb72