Angular CLI：引用哈希脚本

Question

自定义Webpack配置@ angular / cli 6

angular / cli 6支持自定义webpack配置，可以指定自定义应用程序引导程序。

"projects": {
  "custom-name": {
    // ...
    "architect": {
      // ...
      "build": {
        "builder": "@angular-devkit/build-webpack:webpack",
        "options": {
          "webpackConfig": "webpack.config.js"
        }
      }
    }

可以这样指定

自定义webpack配置

 const path = require('path');
 const config = {
   entry: './src/custom-app.js',
   mode: 'production',
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: 'custom-app.js'
   }
 };
 module.exports = config;

然后可以在angular.json中引用输出包

"scripts": [
  { "input": "dist/custom-app.js", "lazy": true }
]

然后原样使用

export class AppComponent {
  ngOnInit(): void {
    const customApp = new Worker('custom-app.js');
  }
}

问题/问题

使用上述设置，缓存可能会成为问题！ 如果我们需要使用custom-app.js来哈希hashcontent捆绑包怎么办？

 const path = require('path');
 const config = {
   entry: './src/custom-app.js',
   mode: 'production',
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: '[name][contenthash].js'
   }
 };
 module.exports = config;

这将不再导致custom-app.js，而是类似custom-app1247989898989.js的结果。

有没有一种方法可以加载哈希文件而不必在构建时存储哈希？

欢迎任何建议 欢呼声

Answer 1

您可以尝试使用以下标志来避免散列

ng build --prod --output-hashing none

有关更多详细信息，请访问此github

Answer 2

经过大量研究，这是我发现的。 这是尝试了SO和Github的一些建议的结果...

首先，我必须更改我的webpack.config.js以添加contenthash支持

const path = require('path');
const config = {
  entry: './src/custom-app.js',
  mode: 'production',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'custom-app.[contenthash].js'
  }
};
module.exports = config;

在输出对象中，如果有多个条目，可以用custom-app替换[name]。

然后我可以使用下面的代码段包含我的哈希脚本

export class AppComponent {
  ngOnInit(): void {
    const customApp = new Worker('custom-app.XXXXXXXXXXXXXXXXXXXX.js);
  }
}

XXXXXXXXXXXXXXXXXXXX是文件的哈希值。

这有一些缺点，例如，如果我更改了custom-app文件，则哈希值将发生变化，我需要引用新的哈希值...

但是它对我有用，因为我正在大量更换工人...