如何將 Webpack build hash 注入應用程序代碼

Question

我正在使用 Webpack 的 [hash] 來緩存破壞語言環境文件。 但我還需要硬編碼語言環境文件路徑以從瀏覽器加載它。 由於文件路徑是用 [hash] 改變的，我需要注入這個值來獲得正確的路徑。

我不知道如何在配置中以編程方式獲取 Webpack [hash] 值，因此我可以使用 WebpackDefinePlugin 注入它。

module.exports = (env) => {
  return {
   entry: 'app/main.js',
   output: {
      filename: '[name].[hash].js'
   }
   ...
   plugins: [
      new webpack.DefinePlugin({
         HASH: ***???***
      })
   ]
  }
}

Answer 1

如果您想將哈希轉儲到文件並將其加載到服務器代碼中，您可以在webpack.config.js定義以下插件：

const fs = require('fs');

class MetaInfoPlugin {
  constructor(options) {
    this.options = { filename: 'meta.json', ...options };
  }

  apply(compiler) {
    compiler.hooks.done.tap(this.constructor.name, stats => {
      const metaInfo = {
        // add any other information if necessary
        hash: stats.hash
      };
      const json = JSON.stringify(metaInfo);
      return new Promise((resolve, reject) => {
        fs.writeFile(this.options.filename, json, 'utf8', error => {
          if (error) {
            reject(error);
            return;
          }
          resolve();
        });
      });
    });
  }
}

module.exports = {
  // ... your webpack config ...

  plugins: [
    // ... other plugins ...

    new MetaInfoPlugin({ filename: 'dist/meta.json' }),
  ]
};

輸出meta.json文件的示例內容：

{"hash":"64347f3b32969e10d80c"}

---

我剛剛為這個插件創建了一個dumpmeta-webpack-plugin包。 所以你可以改用它：

const { DumpMetaPlugin } = require('dumpmeta-webpack-plugin');

module.exports = {
  ...

  plugins: [
    ...

    new DumpMetaPlugin({
      filename: 'dist/meta.json',
      prepare: stats => ({
        // add any other information you need to dump
        hash: stats.hash,
      })
    }),
  ]
}

有關 Stats 對象的所有可用屬性，請參閱Webpack 文檔。

Answer 2

在服務器上，您可以通過從包文件夾中讀取文件名（例如：web.bundle.f4771c44ee57573fabde.js）來獲取哈希值。

Answer 3

看起來它應該是一個基本功能，但顯然它不是那么簡單。

你可以通過使用wrapper-webpack-plugin來完成你想要的。

plugins: [
  new WrapperPlugin({
    header: '(function (BUILD_HASH) {',
    footer: function (fileName) {
      const rx = /^.+?\.([a-z0-9]+)\.js$/;
      const hash = fileName.match(rx)[1];
      return `})('${hash}');`;
    },
  })
]

有點 hacky 但它有效——如果你不介意整個塊被包裹在一個匿名函數中。 或者，您可以在header選項中添加var BUILD_HASH = ... ，但如果它成為全局，則可能會導致問題。

我不久前創建了這個插件，我會嘗試更新它，以便它自然地提供塊哈希。

Answer 4

您可以使用webpack.DefinePlugin將版本傳遞給您的構建

如果你有一個帶有版本的 package.json，你可以像這樣提取它：

const version = require("./package.json").version;

例如（我們對版本進行了字符串化）：

new webpack.DefinePlugin({
    'process.env.VERSION': JSON.stringify(version)
}),

然后在您的 javascript 中，該版本將可用：

process.env.VERSION

Answer 5

WebpackManifestPlugin在輸出管理指南中被官方推薦。 它將 JSON 寫入輸出目錄，將輸入文件名映射到輸出文件名。 然后您可以將這些映射值注入您的服務器模板。

它類似於 Dmitry 的答案，但 Dmitry 的答案似乎不支持多個塊。

Answer 6

這可以通過Webpack Stats Plugin來完成。 它為您提供了漂亮整潔的 output 文件，其中包含您想要的所有數據。 並且很容易在需要的地方將其合並到 webpack 配置文件中。

例如，獲取由 Webpack 生成的 hash 並在其他地方使用。 可以像這樣實現：

# installation
npm install --save-dev webpack-stats-plugin
yarn add --dev webpack-stats-plugin

# generating stats file
const { StatsWriterPlugin } = require("webpack-stats-plugin")

module.exports = {
  plugins: [
    // Everything else **first**.

    // Write out stats file to build directory.
    new StatsWriterPlugin({
      stats: {
        all: false,
        hash: true,
      },
      filename: "stats.json" // Default and goes straight to your output folder
    })
  ]
}

# usage
const stats = require("YOUR_PATH_TO/stats.json");

console.log("Webpack's hash is - ", stats.hash);

他們的倉庫中有更多使用示例

希望有幫助！