Why is [name] always main in MiniCssExtractPlugin for webpack?

Question

In webpack when configuring the MiniCssExtractPlugin, I don't understand why [name] is always "main"?

 plugins: [
   new MiniCssExtractPlugin({
      filename: 'assets/css/[name].css' // where does the name "main" come from?
    }) 
  ]

How could I pass a variable in so that [name] is the name of my app and not "main" without hardcoding it in like filename: 'assets/css/myapp.css' ?

Webpack output config:

module.exports = {
  entry: './src/app.js',
  output: {
    path: utils.resolve('/dist'),
  },

The wierd thing is that even Webpack creates the main bundle file as main.js. Why main?

Answer 1

The [name] is the name of the entry point.

If the entry point is a String or Array webpack will use a a default entry name main, based on https://github.com/webpack/webpack/blob/6f413ae2e63897aef5e1956cb1c351ab33f6dbfe/lib/EntryOptionPlugin.js#L76.

You can provide your entry point as an object,

module.exports = {
  entry: { myName: './src/app.js'},
  output: {
    path: utils.resolve('/dist'),
  },
  ...
}

which will change entry name to myName.