如何在 webpack 联合上下文中向块请求添加参数？

编程问答 2022-05-22

问题描述

我正在基于 webpack 联合在 Liferay Portal 之上构建一个模块加载架构。

由于门户网站具有登录用户的概念并且每个用户都有首选的语言环境，因此我需要使用一个名为 languageId 的额外参数来请求 JavaScript 文件，该参数等同于语言环境代码（例如：{{1} })。这是因为服务器端过滤器根据该参数处理 en_US 文件。

看webpack生成的代码我只能想到两个地方可以做到：

但是，这两个文件似乎不能配置为让我将该参数添加到请求中。

此外，我想不出在运行时可以做任何调整来转换 URL（考虑回调或类似的东西）。

如果有的话，实现这一目标的最佳方法是什么？

如果没有办法，这听起来是不是 webpack 应该具备的功能？

提前致谢。

解决方法

因此，解决方案在 this GitHub issue 中给出。基本上，我需要做的就是：

  1. 创建一个与联邦库完全相同的标准 webpack 入口点。像这样：

module.exports = {
    entry: {
      "xyz": ["./initialization-logic"]
    },plugins: [
      new ModuleFederationPlugin({
        name: "xyz",// ...
      })
    ]
    
    ...
}

  1. 在该入口点添加此代码：

const original = __webpack_get_script_filename__;
    
__webpack_get_script_filename__ = (chunkId) => {
  const filename = original(chunkId);
  return `${filename}?languageId=${lang}`
}

这样，由于 1，代码在浏览器加载库 .js 文件后立即执行。由于 2，标准 __webpack_get_script_filename__ 函数得到了新的补丁，将 languageId 参数添加到请求中。

federationjavascriptwebpackwebpackwebpack