webpack/webpack

Hi everyone, I have a fairly complex webpack 5 script that works great on mac, and emits the files I expect (been lazy loading 5 years of code bloat now that I upgraded from react 15 to 16.14). Some of the dependencies of our react components were grouped into files automatically when I was lazy loading lots of pages in our app, so I setup various optimization->cacheGroups to accomodate the automatically grouped components that webpack was doing. Most of these worked and renamed to the file I wanted like for example:

        "components-store-misc": {
          chunks: 'all',
          name: 'components-store-misc',
          test(mod) {
            if (!mod.context || !mod.userRequest) {
              return false;
            }
            if (
               mod.userRequest.includes('store/checkbox.js') || 
               mod.userRequest.includes('store/velocityStoreLabel.js') ||
               mod.userRequest.includes('components/infoPopup.js') || 
               mod.userRequest.includes('components/search.js') || 
               mod.userRequest.includes('components/store/label.js') ||
               mod.userRequest.includes('components/components/infoPopup.js')
            ) {
              return true;
            } else {
              return false;
            }
          },
        }

Everything was working like a charm on mac osx (all groups that I specified were correct). But when compiling the same webpack on ubuntu 20.04 (our build server), it was not following the same configurations, so it output things like "430.js" on seemingly arbitrary dependencies (missed components that did not have dedicated lazy loaded files to go to).

My first question would be, why would webpack emit a numerical filename in ubuntu, vs a long name like javascript-components-componentName-ef54s.js. To resolve "javascript-components-componentName-ef54s.js" on the mac, I looked at what files it was wanting to group these dependencies in and created groups for them and things were happy. Several of these worked fine on the ubuntu side, but a few were problematic.

I have fixed my problem entirely and things are compiling properly on ubuntu now, but I wanted to understand more if someone knew about why webpack behaves different on different OSs. They are on the same webpack version too.

I added some email events when we compile our javascript to look for suspicious files because if webpack decides to compile 430.js or any numeric number, then when it hotloads the lazy component via a promise, it wont be there because we have to setup golang controllers to read these dist/ files for each emitted lazy loaded library/cacheGroup we have setup.

Thanks for listening to my long winded rant!