How can I add parameter to chunk requests in the context of webpack federation?

Question

I'm building a module loading architecture on top of Liferay Portal based on webpack federation.

Since portal's have the concept of logged in user and each user has a preferred locale, I need to request JavaScript files with an extra parameter named languageId which equates to the locale code (for example: en_US). This is because a server side filter processes the .js files based on that parameter.

Looking at the code generated by webpack I can only think of two places where this could be done:

However, it doesn't seem that these two files could be configured to let me add that parameter to the request.

Also, I can't think of any tweak I could do at runtime to transform the URLs (thinking about a callback or something like that).

What would be the best way to achieve this if there's any?

If there's no way to do it, does it sound like a feature webpack should have?

Thanks in advance.

score 1 · Accepted Answer · answered Mar 09 '21 at 11:30

So, the solution is given in this GitHub issue. Basically, all I needed to do was to:

Create a standard webpack entry point named exactly the same as the federation library. Like this:

module.exports = {
    entry: {
      "xyz": ["./initialization-logic"]
    },

    plugins: [
      new ModuleFederationPlugin({
        name: "xyz",
        // ...
      })
    ]
    
    ...
}

Add this code in that entry point:

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

That way, because of 1, the code is executed right after the library .js file is loaded by the browser. The, because of 2, the standard __webpack_get_script_filename__ function get patched with the new one, that adds the languageId parameter to the request.

How can I add parameter to chunk requests in the context of webpack federation?

1 Answers1