Angular中Webpack与ngx-build-plus 浅学

Webpack 在 Angular 中的概念

        Webpack 是一个模块打包工具，用于将多个模块和资源打包成一个或多个文件。在 Angular 项目中，Webpack 负责将 TypeScript、HTML、CSS 等文件打包成浏览器可以理解的 JavaScript 文件。Angular CLI 默认使用 Webpack 进行项目构建，但配置是隐藏的，开发者通常不需要直接接触 Webpack 配置。

总结来说

        Webpack是现代Angular应用构建系统的核心，负责：

1. 模块打包：将应用的所有模块（TypeScript、CSS、HTML等）打包成浏览器可理解的格式

2. 依赖管理：解析模块间的依赖关系

3. 代码转换：通过loader系统处理TypeScript、SASS等非原生JavaScript资源

4. 优化：执行Tree Shaking、代码分割等优化操作

5. 开发工具：提供热模块替换(HMR)等开发功能

ngx-build-plus 的作用

        ngx-build-plus 是一个 Angular 构建工具，允许开发者在不 eject Angular CLI 配置的情况下，自定义 Webpack 配置。通过 ngx-build-plus，开发者可以扩展或修改默认的 Webpack 配置，以满足特定需求。

总的来说：ngx-build-plus是一个社区维护的库，主要解决以下问题：

1. 扩展默认构建配置：无需eject即可自定义Webpack配置

2. 保留Angular CLI特性：在自定义配置的同时保留CLI的便利功能

3. 微前端支持：特别适合需要自定义构建的微前端架构

Webpack与ngx-build-plus核心功能对比

特性	Angular CLI默认构建	ngx-build-plus增强构建
配置访问	受限	完全访问
自定义Webpack配置	困难	容易
维护性	官方维护	社区维护
微前端支持	有限	专门优化
升级兼容性	高	中等

配置 ngx-build-plus

安装 ngx-build-plus：

npm install ngx-build-plus --save-dev

在 angular.json 中配置自定义 Webpack 配置文件：

"architect": {"build": {"builder": "ngx-build-plus:browser","options": {"customWebpackConfig": {"path": "./extra-webpack.config.js"}}}
}

创建 extra-webpack.config.js 文件，用于自定义 Webpack 配置：

module.exports = {module: {rules: [{test: /\.custom$/,use: 'custom-loader'}]}
};

使用场景

1. 自定义加载器：当项目需要使用特定的文件类型或资源时，可以通过自定义 Webpack 配置来添加相应的加载器。
2. 优化构建：通过自定义 Webpack 配置，可以优化构建过程，例如代码分割、Tree Shaking 等。
3. 集成第三方库：某些第三方库可能需要特定的 Webpack 配置才能正常工作，ngx-build-plus 可以帮助实现这一点。

具体使用案例

• 第一个案例：假设需要在 Angular 项目中处理.custom 文件类型，可以通过以下步骤实现：

安装自定义加载器：

npm install custom-loader --save-dev

在 extra-webpack.config.js 中添加自定义加载器配置：

module.exports = {module: {rules: [{test: /\.custom$/,use: 'custom-loader'}]}
};

在组件中使用 .custom 文件：

import customFile from './example.custom';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {customData = customFile;
}

•  第二个案例：那必须是在微前端MFE， ngx-build-plus特别适合Angular微前端架构，一般都是会使用ngx-build-plus而不是Webpack，特别是在Angular框架项目中，博主我会写单独为此写一篇博客，期待一下啦！！！ 

 博客完成：请大家参考和评阅：

​​​​​​​Angular微前端架构：Module Federation + ngx-build-plus + Webpack -CSDN博客​​​​​​​