时间戳

首页 > 解决方案 > 客户端代码中的 Webpack 编译哈希

angular - 客户端代码中的 Webpack 编译哈希

问题描述

问题

我正在尝试将编译哈希作为 Angular 客户端代码中的变量。我最初的想法是通过DefinePlugin使用ExtendedAPIPlugin插件。Webpack 插件文档指出

ExtendedAPIPlugin -> 将有用的免费变量添加到包中。

__webpack_hash__ 编译的哈希可作为免费 var 使用。

webpack.config.js

    plugins: [
        new webpack.ExtendedAPIPlugin(),
        ...
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify(env),
                'DEP_HASH': JSON.stringify(__webpack_hash__) // ???
            }
        })
      ]

客户代码

process.env.DEP_HASH

然而，webpack 构建抱怨：

ReferenceError: __webpack_hash__ is not defined

那么这个变量在哪里以及如何__webpack_hash__使用呢？

Webpack 版本：3.10.0

解决方案

declare var __webpack_hash__: any;

export class SomeClass {
   ...
   private someFunction(): void {
      let hash = __webpack_hash__(); // Not AOT
      let hash = __webpack_hash__;   // AOT 
   } 
   ...
}

标签： angularwebpack

解决方案

直接在您的应用程序代码中使用它：

视图.js

class SomeView { constructor() { this.hash = __webpack_hash__; } }

如果您使用的是 Typescript，则需要定义__webpack_hash__为全局变量。我想这会做到：

declare var __webpack_hash__: string;

推荐阅读