What is the Purpose of chunkFilename of mini-css-extract-plugin Module?

Question

I'm using mini-css-extract-plugin module now, and setting its chunkFilename value and make sure the value of "[id].css" by running it. However, I couldn't see the file.

The reference is below.

https://webpack.js.org/plugins/mini-css-extract-plugin/#minimal-example

So, my questions is,

What is the chunkFilename of mini-css-extract-plugin?

What is the purpose of chunkFilename?

How can you see the file?

Solution

In webpack's terminology a chunk is an asset that should not be bundled with everything else in one file but should be somehow separated. I guess in your code you don't import asynchronously your styles or have any special splitChunks configuration. That instructs webpack to simply put every css in a file, so the chunkFilename option remains unused.

Check below some examples (that I am aware of) that can create some chunks.

Example 1

// App.js
import './a.css';
import './b.css';
import './c.css';

//webpack.config.js
module.exports = {
  //... other configs
  module: {
    rules: [{
      test: /\.css$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader'],
    }]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: 'chunk-[id].css',
    })
  ]
}

Here we will simply get in the dist folder a main.css file containing a,b,c styles. chunkFilename remains unused in this scenario.

Example 2

// App.js
import './a.css';
import ( /* webpackChunkName: "my-special-style" */ './b.css');
import './c.css';

//webpack.config.js
module.exports = {
  //... other configs
  module: {
    rules: [{
      test: /\.css$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader'],
    }]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: 'chunk-[id].css',
    })
  ]
}

In this setup now, that we use the async import we will end up inside dist folder again with a main.css that now contains only a,c styles and a new file called chunk-my-special-style.css that is basically b.css. As you understand b.css is a chunk now thus it has all the capabilities that webpack provides like chunkFilename.

Example 3

// App.js
import './a.css';
import './b.css';
import './c.css';

//webpack.config.js
module.exports = {
  //... other configs
  module: {
    rules: [{
      test: /\.css$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader'],
    }]
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'ultra-special-styles',
          test: /c\.css$/,
          chunks: 'all',
          enforce: true
        }
      }
    }
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: 'chunk-[id].css',
    })
  ]
}

In this setup now, we use the splitChunks configuration. As the name suggests we have the ability to create our own chunks based on some conditions (regex,functions,etc...). Although these files will not be imported asynchronously is very important to use these optimizations in order not to bloat our files, either js or css. In this example we will end up in dist folder, again with a main.css file that contains a,b styles and chunk-ultra-special-styles.css that is basically c.css. Inside the splitChunks option we specify the name of the chunk (like we did above with a comment) and a regular expression to match the desired files that should be on a seperate chunk/file. Everything else is being handled internally by webpack's and MiniCssExtractPlugin's magic!