How webpack-assets-manifest plugin defines names of assets?

[krutoo]

Hi, in my project i use webpack with module federation plugin and webpack-assets-manifest plugin

webpack-assets-manifest plugin works properly but i dont undesrtand how it defines "original" names of assets

For example i use Module Federation plugin with defined option filename like this:

new webpack.container.ModuleFederationPlugin({
  name: "foobar",
  filename: "remote-entry.js",
  exposes: {
    "./Header": "./src/components/header/index.tsx",
  },
}),

but in assets manifest i see this:

{
  "foobar.js": "remote-entry.js",
  "remote-entry.js.map": "remote-entry.js.map",
  // ...some other assets
}

Keys of manifest object for remote entry relative assets are little bit inconsistent

How webpack-assets-manifest plugin or maybe webpack itself defines names of assets?

[webdeveric]

@krutoo I've not used ModuleFederationPlugin before so I don't know how or why there would be any inconsistencies. What do you expect to be in the assets manifest for your configuration?

Can you create minimal reproducible example that I can clone so I can try some things?

[krutoo]

I think that key foobar.js must be remote-entry.js like in case of .map file but im not sure

You can just clone this repo https://webpack.js.org/plugins/mini-css-extract-plugin/#extracting-all-css-in-a-single-file

and:

• remove optimization property of config
• add webpack-assets-manifest plugin

[webdeveric]

@krutoo The .js suffix is being added to the chunkName here:

webpack-assets-manifest/src/WebpackAssetsManifest.js

Line 351 in dde2bc3

this.assetNames.set( chunkName + this.getExtension( filename ), filename );

The chunkName for your use case is the name option passed into the ModuleFederationPlugin.

[krutoo]

@webdeveric thanks, but why didn't chunkName apply for the .map?

[webdeveric]

@krutoo I get data from compilation.getAssets() and use that to determine what goes in the assets manifest. Some assets do not have info.sourceFilename since they are generated files. In that case, I use the name reported from getAssets().

webpack-assets-manifest/src/WebpackAssetsManifest.js

Line 524 in dde2bc3

const assets = compilation.getAssets().filter(

webpack-assets-manifest/src/WebpackAssetsManifest.js

Lines 574 to 576 in dde2bc3

	const name = sourceFilename ?
	( contextRelativeKeys ? sourceFilename : path.basename( sourceFilename ) ) :
	asset.name;