Webpack 在 Angular 中的概念
????????Webpack 是一個模塊打包工具，用于將多個模塊和資源打包成一個或多個文件。在 Angular 項目中，Webpack 負責將 TypeScript、HTML、CSS 等文件打包成瀏覽器可以理解的 JavaScript 文件。Angular CLI 默認使用 Webpack 進行項目構建，但配置是隱藏的，開發者通常不需要直接接觸 Webpack 配置。
總結來說
????????Webpack是現代Angular應用構建系統的核心，負責：
-
模塊打包：將應用的所有模塊（TypeScript、CSS、HTML等）打包成瀏覽器可理解的格式
-
依賴管理：解析模塊間的依賴關系
-
代碼轉換：通過loader系統處理TypeScript、SASS等非原生JavaScript資源
-
優化：執行Tree Shaking、代碼分割等優化操作
-
開發工具：提供熱模塊替換(HMR)等開發功能
ngx-build-plus 的作用
????????ngx-build-plus 是一個 Angular 構建工具，允許開發者在不 eject Angular CLI 配置的情況下，自定義 Webpack 配置。通過 ngx-build-plus，開發者可以擴展或修改默認的 Webpack 配置，以滿足特定需求。
總的來說：ngx-build-plus是一個社區維護的庫，主要解決以下問題：
-
擴展默認構建配置：無需eject即可自定義Webpack配置
-
保留Angular CLI特性：在自定義配置的同時保留CLI的便利功能
-
微前端支持：特別適合需要自定義構建的微前端架構
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'}]}
};
使用場景
- 自定義加載器：當項目需要使用特定的文件類型或資源時，可以通過自定義 Webpack 配置來添加相應的加載器。
- 優化構建：通過自定義 Webpack 配置，可以優化構建過程，例如代碼分割、Tree Shaking 等。
- 集成第三方庫：某些第三方庫可能需要特定的 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博客???????
