使用Angular Cli生成自定义文件名

Question

使用 Angular-cli 命令 ng build -prod 构建时，生成的文件名为 main.[hash].bundle.js。是否可能从文件名中删除哈希值，只将其命名为 main.bundle.js？

- sneeky

Answer 1

从beta.25版本开始，该功能可通过命令选项进行支持。

这允许通过新的构建命令选项--output-hashing在构建期间配置输出文件名哈希值。有四个可能的值：

none：不执行哈希处理

media：仅对通过[url|file]-loaders处理的文件添加哈希

bundles：仅对输出包添加哈希

all：同时对媒体和包添加哈希

对于开发目标，默认值为 none。 对于生产目标，默认值为 all。

更多详细信息请点击这里。

- Recep

Answer 2

我在package.json文件中为生产构建添加了以下脚本元素。

"scripts": {
    "prod" : "ng build --prod --output-hashing=none --base-href=./"
}

然后运行

npm run prod

构建的 dist 文件夹将不包含哈希，并且会将 ./ 作为 base-href 包含在内，以便文件相对于当前目录加载。

- Krishna Vedula

Answer 3

据我所知，hash用于生产构建，以避免浏览器缓存问题，并且用户在使用新部署之前不必清除缓存。

我怀疑angular-cli团队会给我们提供配置选项，我们需要等待确认。

同时，如果您想自定义构建过程，可以自己构建webpack配置。

此外，CLI团队表示将有一些webpack插件可帮助创建自己的webpack配置。请查看这里。

更多详细信息请参见这里，WEBPACK: AN INTRODUCTION。

- Madhu Ranjan

---

谢谢你的回答，我实际上一直在想哈希背后的原因是什么。 - Alexandra

关于生产环境 - 它肯定是用于缓存，但不要忘记考虑这种情况：有人已经打开了您的旧站点，并且您部署了所有文件的新版本。如果您从 Web 服务器中删除旧文件，则如果某些内容（例如懒加载模块）不存在，则新用户将获得 404 错误。因此，如果新部署与旧部署“相当兼容”（服务器 API / 图像文件名等），则请考虑在一段时间内保留旧文件，以便新用户不会遇到 404 错误。 - Simon_Weaver

这当然取决于你的软件是什么 - 如果你想让人们退出，404错误可能是一件好事 - 但是你最好应该处理它。 - Simon_Weaver

谢谢。如果文件名中有随机字符串，那么通过脚本标记将它们包含在HTML文件中的方法是什么？您能否请查看https://stackoverflow.com/questions/62269386/problems-in-moving-from-development-mode-to-production-mode - Manu Chadha

Answer 4

尝试使用以下方法：

ng build --prod --output-hashing none

- arvindsc

Answer 5

目前你无法使用cli完成这个操作，但是你可以退出并使用标准的Webpack。

在你的项目中运行ng eject，它将构建一个适当的Webpack配置和脚本。

你可以在GitHub上的Wiki中了解更多信息。

https://github.com/angular/angular-cli/wiki/eject

一旦你获得了配置，你可以按照 @tallaxes 的建议去做。

- SpaceBeers

Answer 6

从以下行中删除[chunkhash]，这些行位于angular-cli/models/webpack-build-production.js中（如果是修补，则在node_modules下，在分叉的情况下在packages下）：

filename: '[name].[chunkhash].bundle.js',
sourceMapFilename: '[name].[chunkhash].bundle.map',
chunkFilename: '[id].[chunkhash].chunk.js'

- tallaxes

---

谢谢。但我不能编辑node_modules，因为这是自动构建的。 - sneeky