使用@angular-builders/custom-webpack时，如何查看Angular生成的完整Webpack配置？

我之前折腾@angular-builders/custom-webpack的时候也遇到过一模一样的问题！Angular CLI确实不会把Webpack配置文件直接暴露出来，全是运行时动态生成的，不过有几个实用的临时技巧能帮你拿到这份完整配置，适配你当前的Angular 9版本：

• 方法一：在自定义Webpack配置中打印/导出
  这是最简单的方式，直接在你的custom-webpack.config.js里添加代码，把合并后的完整配置打印出来或者写入文件：

  module.exports = (config, options) => {
    // 方式1：打印到控制台（适合快速查看）
    console.log('完整Webpack配置:', JSON.stringify(config, null, 2));
    
    // 方式2：写入本地文件（方便后续分析）
    const fs = require('fs');
    fs.writeFileSync('./webpack-full-config.json', JSON.stringify(config, null, 2));
  
    // 这里放你原本的自定义配置修改逻辑
    return config;
  };
  

  运行ng build或者ng serve后，你就能在控制台看到完整配置，或者在项目根目录找到生成的webpack-full-config.json文件，里面包含了Angular原生生成的所有配置项，以及你通过custom-webpack添加的修改。

• 方法二：用Angular DevKit的内部API生成配置
  如果你不想在构建时打印，也可以写一个单独的脚本直接导出对应环境的Webpack配置：

  1. 在项目根目录创建generate-webpack-config.js文件，内容如下：

  const { buildWebpackConfig } = require('@angular-devkit/build-angular/src/webpack/configs');
  const { getBrowserConfig } = require('@angular-devkit/build-angular/src/utils');
  const path = require('path');
  const fs = require('fs');
  
  async function generateConfig() {
    // 获取angular.json中指定项目的浏览器配置（第二个参数是环境，比如'production'）
    const browserConfig = await getBrowserConfig(path.resolve(__dirname, './angular.json'), 'development');
    // 生成完整Webpack配置
    const webpackConfig = await buildWebpackConfig(browserConfig, {
      optimization: false,
      sourceMap: true,
      extractLicenses: false,
    });
    
    // 写入文件
    fs.writeFileSync('./webpack-config.json', JSON.stringify(webpackConfig, null, 2));
    console.log('Webpack配置已成功导出到webpack-config.json');
  }
  
  generateConfig().catch(err => console.error('导出失败:', err));
  

  2. 运行node generate-webpack-config.js，就能生成对应环境的完整配置文件。注意：Angular DevKit的内部API路径可能小版本间有细微差异，如果报错可以调整一下导入路径。

• 方法三：通过调试查看配置
  如果你需要深入调试配置生成的过程，可以用VS Code添加调试配置：

  1. 创建.vscode/launch.json，添加如下配置：

  {
    "version": "0.2.0",
    "configurations": [
      {
        "type": "node",
        "request": "launch",
        "name": "Debug Angular Build",
        "program": "${workspaceFolder}/node_modules/@angular/cli/bin/ng",
        "args": ["build"],
        "console": "integratedTerminal",
        "skipFiles": ["<node_internals>/**"]
      }
    ]
  }
  

  2. 在@angular-devkit/build-angular包的Webpack配置生成代码里打断点（比如buildWebpackConfig方法内部），然后启动调试，就能在调试面板里查看生成的完整config对象。

需要注意的是，不同环境（开发/生产）的Webpack配置会有明显差异（比如生产环境会开启代码压缩、树摇等），所以导出时要对应你需要查看的环境。

内容的提问来源于stack exchange，提问作者Edward Prendergast