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

Question

使用 Angular-cli 构建的文件名是 main.[hash].bundle.js 当使用 ng build -prod 是否可以从该文件名中删除散列。所以只是 main.bundle.js?

Answer 1

据我了解，hash 用于生产构建，因此不会运行浏览器缓存问题，并且用户在使用新部署之前不必清除缓存。

我怀疑 angular-cli 团队会给我们配置的选项，我们必须等待检查。

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

此外，CLI 团队表示将有一些 webpack 插件可以帮助创建自己的 webpack 配置。签出 here.

更多详情here, WEBPACK: AN INTRODUCTION。

Answer 2

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

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

Answer 3

从 beta.25 开始通过命令选项支持它。

This allows the output filename hashes to be configured during a build via a new build command option --output-hashing. There are four possible values:

none: no hashing performed

media: only add hashes to files processed via [url|file]-loaders

bundles: only add hashes to the output bundles

all: add hashes to both media and bundles

none is the default for the development target. all is the default for the production target.

更多详情here。

Answer 4

目前您无法使用 cli 执行此操作，但您可以退出它并使用标准 Webpack。

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

您可以在 GitHub 上的 Wiki 中阅读它。

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

获得配置后，您可以执行@tallaxes 建议的操作。

Answer 5

尝试使用：

ng build --prod --output-hashing none

Answer 6

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

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

然后运行

npm run prod

将构建不带散列的 dist 文件夹，并且还包含 ./ 作为 base-href，以便文件相对于当前目录加载。

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

Custom generated filename with Angular Cli

angular-cli

angular