Ревизия активов с помощью angular custom builder - PullRequest
Новая
       33

Ревизия активов с помощью angular custom builder

0 голосов
/ 05 мая 2020

Из этого вопроса о переполнении стека , я пытаюсь использовать @angular-builders/custom-webpack:browser с настраиваемой конфигурацией Webpack, которая использует html -loader и file-loader, чтобы переименовать файлы ресурсов с их ha sh, а также каждая ссылка на них в исходном коде.

Конечная цель - иметь возможность кэшировать ресурсы в браузере, но гарантировать, что у пользователя всегда будет последняя версия актив (потому что, если он изменится в связи с выходом новой версии, изменится и название актива).

Я начал с руководства Angular Tour of Heroes (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 в root приложения: 

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, это будет (o n поверх существующей конфигурации Angular Webpack)

  1. Загрузить файлы TypeScript (используя awesome-typescript-loader)
  2. Загрузить templateUrl и styleUrls из Angular компонентов (используя angular2-template-loader)
  3. Загрузить HTML файлов
  4. Загрузить файлы изображений и переименовать их как активы с их содержимым ha sh

Проблема в том, что когда я запускаю ng build --prod похоже, что это не работает, так как имя изображения актива по-прежнему angular -lo go .png в dist / assets.

Я чувствую, что есть что-то, чего я не понимаю в том, как Webpack работает. Что мне не хватает?

1 Ответ

0 голосов
/ 05 мая 2020

  1. Вам нужно удалить свойство assets в angular. json и, как сказал jonrsharpe, перенести их через загрузчики в операторе import. Теперь вам нужно активировать на них правильные загрузчики.

  2. Angular помещает свои собственные загрузчики в ваши файлы .component.css / .component.html / component.ts, поэтому когда ваш webpack.config. js не экспортирует функцию - вы автоматически удаляете angular загрузчики

    Вам нужно применить angular загрузчики ( ngtools / webpack / src /index.js) в ваших файлах sr c:

    custom-webpack.config. js: 

    module.exports = function (angularConfig) {
     let rules = angularConfig.module.rules || [];

     // feel free to take some rules off, or change the path that they apply on
     // Picking up only Angular core rules from Angular default webpack config.
     angularConfig.module.rules = [
        ...rules.filter(rule => rule.test.source.match(/@angular|\.js/)),
        ...rules.filter(rule => rule.test.source.match(/\.(css|scss|less|styl)/)).map(rule =>

    util .replaceRawLoader (util.excludeUnnecessarryPaths (правило))), ... rules.filter (rule => rule.test.source.match (/. tsx \? /)). map (rule => util.excludeUnnecessarryPaths (rule) )]; 

          return merge(angularConfig, { ... your webpack configuration .... });
}

    Для удобства я намерен поставить точку останова и отладить этот код.

...