如何重命名使用Angular 7生成的bundle？

Question

我创建了一个新的Angular 7项目，并且它构建的包名称为runtime.js、main.js、polyfills.js和styles.js。 如何配置我的项目以使用自定义名称构建包？ 我正在处理一个复杂的项目，其中多个Angular应用程序（版本4.x）同时运行在同一页面上。我有一个单独的应用程序（也是Angular v.4.x），它处理加载所有其他应用程序的包的配置。包列表是硬编码的，这是我无法更改的内容。因此，当我想要使用此代码引导我的Angular 7应用程序时，我不能在生产环境中执行此操作，因为包的名称不匹配。

我未能在此时配置项目，因为据我所知，webpack配置对开发人员是隐藏的。我考虑编写一种后构建脚本，该脚本将在创建包后完成并简单地重命名文件，但这样的解决方法似乎有些冒险，而且我不知道它是否实际可行。

我的构建脚本： "release": "ng build --prod --aot --extract-css=false --output-hashing=none --source-map=true"。

这是每个 Angular v.4.x 应用程序加载的捆绑包名称列表，我需要从 Angular v.7.x 中获得相同的内容：

'main.bundle.js':,
'vendor.bundle.js',
'styles.bundle.js',
'inline.bundle.js',
'scripts.bundle.js',
'polyfills.bundle.js'.

这是我从 Angular v.7.x 应用程序获取的包列表：

'runtime.js',
'main.js', 
'polyfills.js',
'styles.js'

- inna.ditiashova

---

默认情况下，Angular v7（以及之前的版本）中的捆绑包名称通常包含哈希值以进行缓存破坏。你没有得到这个哈希值吗？还是你关闭了它？或者你没有使用生产标志进行构建？ - Igor

所有的配置都应该在angular.json中可用，尽管看起来并不是每个输出名称都是可配置的。也许你可以在执行后运行一个自定义脚本来重命名文件，然后为那些在v7版本中不再包含在构建中的文件添加一些空文件。 - Igor

嗨，@Igor！ 感谢你的评论。是的，我在构建脚本中使用了--output-hashing=none。我会进一步查看关于angular.json设置的内容，可能会在那里找到一些解决方案。 - inna.ditiashova

说真的，在一个页面上放置多个Angular应用程序？我觉得文件名是你最不用担心的问题之一..（区域错误！！） - MikeOne

@MikeOne，不用了，我们已经测试过了，这个问题没什么大问题。只剩下一个小事情，就是捆绑命名... - inna.ditiashova

Answer 1

你可以使用 Angular Builders 来定制构建的任何部分。你可以使用 webpack builder 来配置文件名：

angular.json

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js",

webpack.config.js

const webpack = require('webpack');
module.exports = {
  optimization: {
    runtimeChunk: false
  },
  output: {
    filename: '[name].[hash].min.js'
  }
}

然后运行普通的Angular构建（将使用angular.json配置）：

ng build --prod

- Kim T

---

属性 'customWebpackConfig' 不被允许 - 这似乎不正确？ - Richard

这是针对Angular v7的，现在Angular已经更新到v12了，所以这种方法可能不再适用。 - Kim T

谢谢，是的，显然不是在v11上（我们正在使用的版本）。 - Richard

在Angular 13上对我们起作用了。我不需要runtimeChunk标志。 - William Desportes

Answer 2

请检查您的angular.json文件中的configurations部分，确保您正在使用的配置中outputHashing设置为true。这些选项也可以通过CLI使用。

参考：ng build 更新：

在最新的Angular版本中，outputHashing的可能值为none|all|media|bundles，而不是boolean。要进行完全的缓存破坏或名称隔离，请使用all。

- Guerric P

---

嗨！谢谢你的评论！我不确定是否需要这个，我想避免在文件名中使用哈希值，我只需要完全不同的文件名 :) - inna.ditiashova

为什么？哈希值在你的两个应用程序之间是不同的，为什么要使用自己的文件名呢？ - Guerric P

想象一下，有本地化的构建版本，根据语言 cookie 进行服务。构建中的脚本都具有相同的文件名，包括 main.[hash].js，其中包含所有的翻译。浏览器会缓存这个文件。因此，当您在客户端更改语言时，后端会从所选语言中提供 main.[hash].js，但浏览器仍将使用先前语言的缓存脚本。将区域设置添加到文件名中可以解决这个问题，例如 fr.main.[hash].js。 - Senne