使用角度自定义生成器进行资产修订

Question

[从this Stack Overflow question开始，我正在尝试将@angular-builders/custom-webpack:browser与自定义Webpack配置结合使用，该配置使用html-loader和file-loader来重命名资产文件及其哈希内容以及源中对它们的每个引用代码。

最终目的是能够在浏览器中缓存资产，但要保证用户始终拥有资产的最新版本（因为由于新版本而导致资产的名称发生变化，资产名称将发生变化。 ）。

[我从《英雄之旅》指南（https://angular.io/tutorial开始，并执行以下步骤：

（（在我添加的dashboard.component.html中）

...
<img src="assets/angular-logo.png" />
...
然后我添加了src/assets/angular-logo.png

我将angular.json文件更改为使用自定义生成器

"architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser", <------------- (changed this)
      "options": {
        "outputPath": "dist",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.app.json",
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "src/styles.css"
        ],
        "scripts": []
      },
      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "customWebpackConfig": { <---------------------------------------- (added this)
            "path": "custom-webpack.config.js"
          },
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2mb",
              "maximumError": "5mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "6kb",
              "maximumError": "10kb"
            }
          ]
        }
      }
    },
    ...
}
然后我在应用程序的根目录下创建了custom-webpack.config.js：

module.exports = {
    module: {
        rules: [
            {
                test: /\.ts$/,
                loaders: ['awesome-typescript-loader', 'angular2-template-loader'],
                exclude: [/\.(spec|e2e)\.ts$/]
            },
            {
                test: /\.html$/,
                use: ['html-loader']
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file-loader',
                options: {
                    outputPath: 'assets/',
                    name: '[name].[contenthash].[ext]',
                },
            }
        ]
    }
}
并且我npm安装了所有必需的装载程序以及@angular-builders/custom-webpack。

据我了解，当我运行ng build --prod时，它将（在现有Angular Webpack配置的顶部）

1. 加载TypeScript文件（使用awesome-typescript-loader）
2. 从Angular组件中加载templateUrl和styleUrl（使用angular2-template-loader）
3. 加载HTML文件
4. 加载图像文件并使用其内容哈希将它们重命名为资产

问题是，当我运行ng build --prod时，它似乎不起作用，因为资产图像名称仍是dist / assets中的angular-logo.png。

我感觉我对Webpack的工作方式有些不了解。我缺少什么？

从这个堆栈溢出问题开始，我试图将@ angular-builders / custom-webpack：browser与使用html-loader和file-loader的自定义Webpack配置一起使用，以便使用...重命名资产文件。]

Answer 1

Angular在您的.component.css / .component.html / component.ts文件中放置了自己的加载器，

所以当您的webpack.config.js不导出函数时，您将自动删除角度加载器