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?

Aardwolf

What is the name that you've gave to your entry point? – Vitriolic

@Vitriolic no name, i dont have any such option set – Aardwolf

Can you add your output part of your webpack config? – Vitriolic

@Vitriolic done :) also webpack creates the bundle javascript as main.js. Where is it getting the name main from? – Aardwolf

As I've wrote, it comes from the name of the entry, you are using the default name which is main (github.com/webpack/webpack/blob/…) :) – Vitriolic

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.

Vitriolic

thank you that makes sense now. I didn't realise that main was the default name. – Aardwolf