Angular构建文件如何保持与组件一致的文件夹结构？

方法一：拆分多项目架构（推荐） #

这种方式贴合Angular设计规范，后续维护更省心：

• 调整目录结构，把需要独立构建的组件拆成独立子应用：

src
-> main-app
    -> app
        -> app.component.html
        -> app.component.ts
        -> app.component.css
        -> app.module.ts
        -> main.ts
        -> polyfills.ts
-> register-app
    -> app
        -> register.component.html
        -> register.component.ts
        -> register.component.css
        -> register.module.ts
        -> main.ts
        -> polyfills.ts

• 修改angular.json，给每个子应用配置独立的构建输出路径：

{
  "projects": {
    "main-app": {
      "root": "src/main-app/",
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/app",
            "index": "src/main-app/app/index.html",
            "main": "src/main-app/app/main.ts",
            "polyfills": "src/main-app/app/polyfills.ts",
            "tsConfig": "src/main-app/app/tsconfig.app.json",
            "styles": ["src/main-app/app/app.component.css"],
            "assets": []
          }
        }
      }
    },
    "register-app": {
      "root": "src/register-app/",
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/app/register",
            "index": "src/register-app/app/register.component.html",
            "main": "src/register-app/app/main.ts",
            "polyfills": "src/register-app/app/polyfills.ts",
            "tsConfig": "src/register-app/app/tsconfig.app.json",
            "styles": ["src/register-app/app/register.component.css"],
            "assets": []
          }
        }
      }
    }
  }
}

• 在package.json中添加批量构建脚本，一键完成所有组件构建：

{
  "scripts": {
    "build:all": "ng build main-app && ng build register-app"
  }
}

执行npm run build:all就能得到你想要的输出结构。

方法二：自定义Webpack配置（无需调整原有目录） #

如果不想改动现有目录结构，可以通过自定义Webpack配置强制拆分资源：

• 安装自定义构建器：

npm install @angular-builders/custom-webpack --save-dev

• 修改angular.json，替换默认构建器为自定义Webpack，指定配置文件路径并关闭哈希命名：

{
  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js"
            },
            "outputPath": "dist/app",
            "outputHashing": "none",
            // 保留原有其他配置
          }
        }
      }
    }
  }
}

• 创建webpack.config.js，配置多入口和资源输出规则：

const path = require('path');

module.exports = {
  entry: {
    main: './src/app/app.component.ts',
    'register/main': './src/app/register/register.component.ts'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist/app')
  },
  module: {
    rules: [
      // 处理HTML文件，重命名为index.html并放到对应文件夹
      {
        test: /\.component\.html$/,
        loader: 'file-loader',
        options: {
          name: (file) => {
            const relativePath = file.replace(/src\/app\//, '');
            return relativePath.replace(/\.component\.html$/, 'index.html');
          }
        }
      },
      // 处理CSS文件，重命名为style.css并放到对应文件夹
      {
        test: /\.component\.css$/,
        loader: 'file-loader',
        options: {
          name: (file) => {
            const relativePath = file.replace(/src\/app\//, '');
            return relativePath.replace(/\.component\.css$/, 'style.css');
          }
        }
      }
    ]
  }
};

• 执行ng build即可生成符合要求的文件结构。

注意：自定义Webpack可能会和Angular默认构建逻辑冲突（比如样式预处理器、资源处理），需要根据项目实际情况调整配置。

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