javascript - 如何访问在复制 webpack 插件期间散列的静态资源的实际名称/路径/url

Question

所以我有使用复制 webpack 插件进行哈希处理的资源。

{
            from: "data/json/*.json",
            to: "data/json/[name].[hash:6].json",
},

现在在运行时我需要访问这些 json 文件的实际 url。 我理想的情况是能够在运行时获取这个 url，这样我就可以做类似的事情

let name = "tiles";
const tileDataUrl = requireUrl(`data/json/${name}.json`);
fetch(tileDataUrl) // tileData Url here would  data/json/tiles.abc34f.json


...

我需要的是一个方法 requireUrl (或者任何可能被调用的方法)，它在运行时返回带有哈希值的静态资源的实际 url。

(对于任何想知道的人，哈希值用于此处进行缓存清除)

请并谢谢你:)

Answer 1

假设您使用的是版本 5，Webpack asset modules将提供您想要的内容，而不需要 copy-webpack-plugin。 Webpack 可以识别 require statement with expressions 。 Webpack 将自动为您包含所有可能匹配的文件，无需额外配置。在这种情况下，您可能需要注意 Webpack 知道名称设置为“tiles”的优化。以下是您的配置中所需的添加内容:

module.exports = {
   module: {
      rules: [
          {
              test: /data\/json\/.+\.json$/
              type: 'asset/resource',
              generator: {
                  // Look at https://webpack.js.org/configuration/output/#template-strings to see additional template strings.
                  filename: '[path][name].[hash:6][ext]'
              }
          }
      ]
   }
}

或者，对于 Webpack 4，您可以添加 file-loader作为依赖项并将其与等效的配置添加一起使用:

module.exports = {
   module: {
      rules: [
          {
              test: /data\/json\/.+\.json$/
              loader: 'file-loader',
              options: {
                  name: '[path][name].[hash:6][ext]'
              }
          }
      ]
   }
}

无论哪种方式，您的代码现在都可以简单地工作，如下所示:

let name = "tiles";
const tileDataUrl = require(`data/json/${name}.json`); // tileDataUrl will display the interpolated filename.
fetch(tileDataUrl);