如何自定义配置Angular CLI下的Webpack和loader处理

# 如何自定义配置Angular CLI下的Webpack和loader处理

## 摘要 
（约500字，此处展示部分）
Angular CLI作为官方脚手架工具，默认抽象了Webpack配置以简化开发流程。但在实际企业级项目中，开发者经常需要突破默认配置限制，自定义Webpack构建流程。本文将深入探讨：
1. Angular CLI与Webpack的集成架构
2. 三种不同级别的配置覆盖方法
3. 常用loader的深度定制方案
4. 性能优化与自定义构建的最佳实践
...

---

## 一、Angular CLI与Webpack的集成架构

### 1.1 CLI的构建流程解析
（完整章节约2500字，此处展示部分）

Angular CLI执行`ng build`时触发的完整工作流：

```typescript
// 简化后的核心流程
1. 解析angular.json配置
2. 初始化Webpack配置生成器
3. 合并环境特定配置
4. 创建Webpack compiler实例
5. 执行编译并处理输出

npm install -D @angular-builders/custom-webpack

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      }
    }
  }
}

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

// webpack.config.js
module.exports = (baseConfig) => {
  const cssRules = baseConfig.module.rules.find(rule => 
    rule.test.toString().includes('.css')
  );
  
  // 修改loader配置
  cssRules.use = [
    'to-string-loader',
    {
      loader: 'css-loader',
      options: {
        modules: {
          localIdentName: '[name]__[local]--[hash:base64:5]'
        }
      }
    }
  ];
  
  return baseConfig;
};

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'hostApp',
      remotes: {
        mfe1: 'mfe1@http://localhost:3001/remoteEntry.js'
      },
      shared: {
        '@angular/core': { singleton: true },
        '@angular/common': { singleton: true }
      }
    })
  ]
};