Search code examples
javascriptwebpackwebpack-5webpack-module-federation

Webpack Module Federation changes names of shared libraries to numbers

With Webpack Module Federation, how do I retain development filenames when building as production?

Currently, it's changing them all to numbers like 3279.js instead of something like src_applications_myApp_jsx.js.

Parts of the Webpack config:

const { dependencies } = require('../package.json');

output: {
  chunkFilename: 'vendor/[name].js',
  filename: '[name]/app.js',
},

new webpack.container.ModuleFederationPlugin({
  shared: dependencies,
}),

The issue is the chunkFilename. Changing it to 'vendor/[id].js' doesn't change anything either.

Webpack's docs say the [name] property will only work if the chunk has a name. So I guess, why is a name not set?

enter image description here

Solution

  • for chunks you can just use

    webpackConfig.optimization.chunkIds='named'

    It'll keep your chunk names readable, see link for further docu https://webpack.js.org/configuration/optimization/#optimizationchunkids