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

jum4pzuy  于 2023-05-23  发布在  Webpack
关注(0)|答案(7)|浏览(233)

我正在使用Webpack的[hash]来缓存破坏区域设置文件。但我还需要硬编码的区域设置文件路径,从浏览器加载它。由于文件路径是用[hash]改变的,我需要注入这个值来获得正确的路径。
我不知道如何在配置中以编程方式获取Webpack [hash]值,以便使用WebpackDefinePlugin注入它。

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

ibps3vxo1#

如果你想将哈希值转储到一个文件中,并将其加载到服务器的代码中,你可以在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

wqsoz72f

wqsoz72f2#

看起来这应该是一个基本的功能,但显然它不是那么简单。
您可以通过使用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}');`;
    },
  })
]

有点笨拙,但它工作-如果你不介意整个块被 Package 在一个匿名函数。或者,您可以在header选项中添加var BUILD_HASH = ...,但如果它成为全局变量,则可能会导致问题。

  • 我创建了这个插件一段时间回来,我会尝试更新它,以便它自然地提供块哈希。*
ioekq8ef

ioekq8ef3#

在服务器上,您可以通过阅读文件名(例如:web.bundle.f4771c44ee57573fabde.js)。

vh0rcniy

vh0rcniy4#

WebpackManifestPlugin在输出管理指南中被正式推荐。它将JSON写入输出目录,将输入文件名Map到输出文件名。然后,您可以将这些Map值注入到服务器模板中。
它与Dmitry的答案类似,除了Dmitry的似乎不支持多个块。

nuypyhwy

nuypyhwy5#

您可以使用webpack.DefinePlugin将版本传递给构建
如果你有一个package.json的版本,你可以像这样提取它:

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

例如(我们将版本字符串化):

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

然后在你的javascript中,版本将是:

process.env.VERSION
vfwfrxfs

vfwfrxfs6#

这可以通过Webpack Stats Plugin来实现。它为您提供了漂亮整洁的输出文件,其中包含您想要的所有数据。而且很容易将其合并到需要的webpack配置文件中。
例如,获取Webpack生成的哈希并在其他地方使用。可以实现如下:

# 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);

repo中的更多用法示例
希望有帮助!

vsnjm48y

vsnjm48y7#

可以使用https://www.npmjs.com/package/build-hash-webpack-plugin

import BuildHashPlugin from 'build-hash-webpack-plugin';
// ...
module.exports = {
    // ....
    plugins: [new BuildHashPlugin()]
}

输出是一个JSON对象,格式如下:

{"hash":"68aaedf27867fc4cb95d"}

相关问题