使用角度自定义构建器进行资产修订 [英] Assets revisioning using angular custom builder
问题描述
来自此堆栈溢出问题，我正在尝试将@angular-builders/custom-webpack:browser与使用html的自定义Webpack配置一起使用-loader和file-loader，以便使用其哈希内容以及源代码中对它们的每个引用来重命名资产文件.
From this Stack Overflow question, I am trying to use a @angular-builders/custom-webpack:browser with a custom Webpack config that uses html-loader and file-loader in order to rename asset files with their hash content as well as each reference to them in the source code.
最终目的是能够在浏览器中缓存资产，但要保证用户始终拥有资产的最新版本(因为由于新版本而导致资产更改，资产名称将也改变).
The final purpose is to be able to cache the assets on in the browser but to guarantee that the user will always have the latest version of the asset (because if it changes due to a new release, the name of the asset will change too).
我从《 Angular Tour of Heroes》指南( https://angular.io/tutorial )开始，完成了以下步骤:
I started from the Angular Tour of Heroes guide (https://angular.io/tutorial) and did the following steps:
(在我添加的dashboard.component.html中)
(in dashboard.component.html I added)
...
<img src="assets/angular-logo.png" />
...
然后我添加了src/assets/angular-logo.png
我将angular.json文件更改为使用自定义生成器
I changed the angular.json file to use a custom builder
"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:
Then I created custom-webpack.config.js at the root of the application:
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.
and i npm installed all the required loaders as well as @angular-builders/custom-webpack.
据我了解，当我运行ng build --prod时，它将(在现有的Angular Webpack配置之上)
From what I understand, when I run ng build --prod, this will (on top of the existing Angular Webpack config)
- 加载TypeScript文件(使用
awesome-typescript-loader) - 从Angular组件中加载templateUrl和styleUrl(使用
angular2-template-loader) - 加载HTML文件
- 加载图像文件并使用其内容哈希将它们重命名为资产
- Load TypeScript files (using
awesome-typescript-loader) - Load templateUrl and styleUrls from Angular components (using
angular2-template-loader) - Load HTML files
- Load image files and rename them as assets with their content hash
问题在于，当我运行ng build --prod时，它似乎无法正常工作，因为资产图片名称仍是dist/assets中的angular-logo.png.
The problem is that when I run ng build --prod it does not seem to work as the asset image name is still angular-logo.png in dist/assets.
我感觉我对Webpack的工作方式有些不了解.我想念的是什么?
I feel like there is something I don't understand about the way Webpack works. What I am missing?
推荐答案
-
您需要删除angular.json中的assets属性，就像jonrsharpe所说的那样，通过
import语句中的加载器将它们带来.现在，您需要在其上激活正确的加载程序.
You need to delete assets property in angular.json and like jonrsharpe said bring them via loaders in
importstatement. Now you need the right loaders to be activated on them.
Angular在.component.css/.component.html/component.ts文件中放置了自己的加载器， 因此当您的webpack.config.js不导出函数时-您 自动删除角度装载机
Angular puts its own loaders on your .component.css/.component.html/component.ts files, so when your webpack.config.js does not export a function - you automatically delete angular loaders
您需要应用角度加载器( ngtools/webpack/src/index.js ) 在您的src文件中:
You need to apply angular loaders (ngtools/webpack/src/index.js) on your src files:
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(rule)))， ... rules.filter(rule => rule.test.source.match(/.tsx \?/)).map(rule => util.excludeUnnecessarryPaths(规则)) ];
util.replaceRawLoader(util.excludeUnnecessarryPaths(rule))), ...rules.filter(rule => rule.test.source.match(/.tsx\?/)).map(rule => util.excludeUnnecessarryPaths(rule)) ];
return merge(angularConfig, { ... your webpack configuration .... });
}
为方便起见，我打算放置一个断点并调试此代码.
For convenience, I purpose to put a breakpoint and debug this code.
这篇关于使用角度自定义构建器进行资产修订的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
