Angular构建时如何阻止SVG/WEBP文件从Assets复制到主目录？

核心思路 #

让构建工具识别这些资源属于预配置的assets目录，不再单独复制重命名，直接使用assets中已同步的原文件。

具体解决方法 #

1. 确保assets目录配置正确 #

先确认angular.json中已经配置了assets的复制规则，这样原文件会被同步到dist目录的assets下：

"architect": {
  "build": {
    "options": {
      "assets": [
        "src/assets",
        // 其他assets配置...
      ],
      // 其他配置...
    }
  }
}

2. 修改CSS/LESS中的资源引用路径 #

在样式文件中引用资源时，使用相对于输出目录根的绝对路径，或者正确的相对路径指向assets目录：

• 绝对路径写法（推荐，不受样式文件位置影响）：

  .icon {
    background-image: url('/assets/images/icon.svg');
  }
  

• 相对路径写法（根据样式文件所在位置调整层级）：

  // 假设样式文件在src/app/components/xxx.less，资源在src/assets/images/
  .icon {
    background-image: url('../../assets/images/icon.svg');
  }
  

避免使用~前缀（比如~assets/xxx），这种写法会让webpack将资源当作模块解析，触发单独复制行为。

3. 自定义webpack规则（可选，针对复杂场景） #

如果上述方法无效，通过自定义webpack配置强制指定资源输出路径：

1. 安装自定义webpack构建器：

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

2. 修改angular.json中的构建配置，替换为自定义webpack builder：

   "architect": {
     "build": {
       "builder": "@angular-builders/custom-webpack:browser",
       "options": {
         "customWebpackConfig": {
           "path": "./webpack.config.js"
         },
         // 保留原有其他配置...
       }
     }
   }
   

3. 项目根目录创建webpack.config.js，添加资源处理规则：

   module.exports = {
     module: {
       rules: [
         {
           // 匹配SVG和WEBP文件
           test: /\.(svg|webp)$/i,
           // 匹配样式文件作为引用者
           issuer: /\.(less|css)$/i,
           type: 'asset/resource',
           generator: {
             // 指定输出到assets目录，保留原文件名
             filename: 'assets/[name][ext]'
           }
         }
       ]
     }
   };
   

这样webpack会将这些资源输出到dist/assets目录下（和原文件同名），不会在主目录生成哈希重命名的文件，样式中的引用也能直接对应到该路径。

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