What is the right compilation hook to transform asset module names prior to emit?

[alina-zaieva]

Our CDN has a limitation where all uploaded files need to have lowercase names so that they are fetched correctly. For chunks, we have a custom Webpack plugin that taps into afterChunks/afterOptimizeChunks and transforms chunk names into lowercase by setting chunk.name = chunk.name.toLowerCase();, which ensures that resulting chunk filenames are compatible with the CDN.

Now we are switching our static assets (images and fonts) from file-loader to asset/resource asset modules and need to have the same transformation applied to them as well. What would be the right hook to transform file names of these assets (either a new one specific to asset modules or a generic one that could transform names for both chunks and asset modules)?

Currently we have a workaround by setting a transform function to output.assetModuleFilename, but we would rather have a (custom) plugin to be responsible for this. Thanks! 🙂

[alexander-akait]

There is a hook to work with assets - https://github.com/webpack/webpack/blob/main/lib/Compilation.js#L844, using custom assetModuleFilename is good solutions too

[alina-zaieva]

The problem with assetModuleFilename in our case is that we have many apps with separate Webpack configs in a monorepo, and they define their own file paths and name formats. Ideally we would want to have CDN-specific lowercasing logic to be separated from things like what the file should be named or where it should be placed 🙂

Thanks for the pointer to processAssets, what would be the right way to both rename the assets and update the generated JS modules at this step? I've tried a naive approach with compilation.renameAsset, but that just renames the emitted file, the JS module still references the original name.

[alexander-akait]

Just change names in compilation.assets and use the early stage:

compilation.hooks.processAssets.tap(
  {
    name: "Name",
    stage: -10000
  }, 
  () => {}
);