Search code examples
javascriptwebpackfederation

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


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.


Solution

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

    1. 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",
            // ...
          })
        ]
        
        ...
    }

    1. 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.