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 documentation。

Answer 2

您可以使用webpack.DefinePlugin

将版本传递给您的版本

如果你有一个带有版本的package.json，你可以像这样提取它：

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

例如（我们将版本字符串化）：

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

然后在您的javascript中，该版本将以：

的形式提供

process.env.VERSION

Answer 3

似乎它应该是一个基本功能，但显然它并不那么简单。

您可以使用wrapper-webpack-plugin完成所需内容。

SELECT TIMESTAMPTZ '2018-02-18 02:00:00+00' - TIMESTAMPTZ '2018-02-18 01:00:00+00'; ?column? ---------- 01:00:00 (1 row)

有点hacky但是它有效 - 如果你不介意整个块被包装在一个匿名函数中。或者，您可以在plugins: [ new WrapperPlugin({ header: '(function (BUILD_HASH) {', footer: function (fileName) { const rx = /^.+?\.([a-z0-9]+)\.js$/; const hash = fileName.match(rx)[1]; return `})('${hash}');`; }, }) ]选项中添加var BUILD_HASH = ...，但如果它变为全局，则可能会导致问题。

我之前创建了这个插件，我会尝试更新它，以便它自然地提供块散列。

Answer 4

在服务器上，您可以使用某些函数获取[hash] id，以读取文件包文件夹中的文件名（例如：web.bundle.f4771c44ee57573fabde.js）

Answer 5

WebpackManifestPlugin 是在 output management guide 中正式推荐的。它将 JSON 写入输出目录，将输入文件名映射到输出文件名。然后您可以将这些映射值注入您的服务器模板。

它类似于 Dmitry 的回答，但 Dmitry 的回答似乎不支持多个块。

如何将Webpack构建哈希注入应用程序代码

5 个答案: