How to use the extract-css-chunks-webpack-plugin.loader function in extract-css-chunks-webpack-plugin

rules: [{
                test: /\.js$/, // Transform all .js files required somewhere with Babel
                exclude: /node_modules/,
                use: 'babel-loader',
            }, {
                test: /\.(css|scss)$/,
                include: [
                    // CSS modules should only be generated from css/scss files within the src directory
                    path.resolve(app_root, 'src'),

                    // Global stylesheets in the static directory do not generate modules
                    path.resolve(project_root, 'static'),
                ],
                use: [
                    // When MiniCssExtractPlugin becomes stable and supports all options, convert if needed
                    ExtractCssChunks.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            modules: true,
                            importLoader: 1,
                            localIdentName: '[path][name]__[local]--[hash:base64:5]',
                            getLocalIdent: (loaderContext, localIdentName, localName, options) => {
                                // Everything that comes from our global style folder and node_modules will be in global scope
                                if (/styles-src|node_modules/.test(loaderContext.resourcePath)) {
                                    return localName;
                                }

                                return getLocalIdent(loaderContext, localIdentName, localName, options);
                            },
                        },

export default function({ stage, isNode }) {
  let cssLoader = initCSSLoader()
  if (stage === 'node' || isNode) {
    return {
      test: /\.css$/,
      loader: cssLoader,
    }
  }

  cssLoader = [
    {
      loader: ExtractCssChunks.loader,
      options: {
        hot: true,
      },
    },
    ...cssLoader,
  ] // seeing as it's HMR, why not :)

  return {
    test: /\.css$/,
    loader: cssLoader,
  }
}

cssLoaderOptions
    )
  }

  // When not using css modules we don't transpile on the server
  if (isServer && !cssLoader.options.modules) {
    return ['ignore-loader']
  }

  // When on the server and using css modules we transpile the css
  if (isServer && cssLoader.options.modules) {
    return [cssLoader, postcssLoader, ...loaders].filter(Boolean)
  }

  return [
    !isServer && ExtractCssChunks.loader,
    cssLoader,
    postcssLoader,
    ...loaders
  ].filter(Boolean)
}

],
        },
        {
            exclude: /node_modules/u,
            test: /\.css$/u,
            use: [
                mode === 'dev'
                    ? {
                          loader: 'style-loader',
                          options: {
                              hmr: true,
                              sourceMap: true,
                          },
                      }
                    : {
                          loader: ExtractCssChunks.loader,
                          options: {
                              hot: false,
                              reloadAll: false,
                          },
                      },
                {
                    loader: 'css-loader',
                    options: {
                        // eslint-disable-next-line no-magic-numbers
                        importLoaders: 2,
                        sourceMap: false,
                    },
                },
                {
                    loader: 'postcss-loader',
                    options: {

sourceMap: true,
        ident: 'postcss',
        plugins: () => [
          postcssFlexbugsFixes,
          autoprefixer({
            flexbox: 'no-2009',
          }),
        ],
      },
    }

    if (stage === 'dev') {
      // Dev
      loaders = [
        {
          loader: ExtractCssChunks.loader,
          options: {
            hot: true,
          },
        },
        cssLoader,
        postCssLoader,
        lessLoader,
      ]
    } else if (stage === 'node') {
      // Node
      // Don't extract css to file during node build process
      loaders = [cssLoader, postCssLoader, lessLoader]
    } else {
      // Prod

      // for legacy css-loader version (<2.0) we need to add "minimize" to minify css code

'not ie < 9' // React doesn't support IE8 anyway
            ]
          })
        ]
      }
    };

    appConfig.module.rules.push({
      test: /\.(sa|sc)ss$/,
      use:
        isServer ? [
          cssLoader,
          postCSSLoader,
          sassLoader,
        ] : [
          dev ? 'style-loader' : ExtractCssChunks.loader,
          cssLoader,
          postCSSLoader,
          sassLoader,
        ],
    });

    if (!isServer && !dev) {
      appConfig.plugins.push(
        new ExtractCssChunks({
          allChunks: true,
          filename: dev ? '[name].module.css' : '[name]-[hash].module.css',
          chunkFilename: dev ? '[id].css' : '[id]-[hash].css',
          hot: dev, // if you want HMR - we try to automatically inject hot reload
          orderWarning: true, // Disable to remove warnings about conflicting order between imports
          reloadAll: true, // when desperation kicks in - this is a brute force HMR flag
          cssModules: true, // if you use cssModules, this can help.

]
    } else if (stage === 'node') {
      // Node
      // Don't extract css to file during node build process
      loaders = [cssLoader, postCssLoader, sassLoader]
    } else {
      // Prod

      // for legacy css-loader version (<2.0) we need to add "minimize" to minify css code
      // for >2.0 it is handled with https://github.com/NMFR/optimize-css-assets-webpack-plugin
      const cssLoaderVersion = require('css-loader/package.json').version
      if (semver.satisfies(cssLoaderVersion, '<2') === true) {
        cssLoader.options.minimize = true
      }

      loaders = [ExtractCssChunks.loader, cssLoader, postCssLoader, sassLoader]
    }

    config.module.rules[0].oneOf.unshift({
      test: /\.s(a|c)ss$/,
      use: loaders,
    })

    if (
      config.optimization.splitChunks &&
      config.optimization.splitChunks &&
      config.optimization.splitChunks.cacheGroups.styles
    ) {
      config.optimization.splitChunks.cacheGroups.styles.test = /\.(c|sc|sa)ss$/
    }

    return config

importLoaders: 1,
        minimize: stage === 'prod',
        sourceMap: false,
      },
    }

    if (stage === 'dev') {
      // Dev
      loaders = [styleLoader, cssLoader, sassLoader]
    } else if (stage === 'node') {
      // Node
      // Don't extract css to file during node build process
      loaders = [cssLoader, sassLoader]
    } else {
      // Prod
      loaders = [ExtractCssChunks.loader, cssLoader, sassLoader]
    }

    config.module.rules[0].oneOf.unshift({
      test: /\.s(a|c)ss$/,
      use: loaders,
    })

    return config
  },
})

test: /\.json/,
					loader: "json-loader",
					exclude: /node_modules/,
				},
				{
					test: /\.less/,
					loader: [
						"less-loader",
					],
					exclude: /node_modules/,
				},
				{
					test: /\.(sa|sc|c)ss$/,
					use: [
						{
							loader: ExtractCssChunksPlugin.loader,
							options: {
								hot: hot,
							},
						},
						'css-loader',
						"sass-loader",
					],
				},
				{
					test: /\.md/,
					loader: "raw-loader",
					exclude: /node_modules/,
				},
			]),
		},
		resolve: {

const MiniCssExtractPlugin = require("extract-css-chunks-webpack-plugin");
const StyleLintPlugin = require('stylelint-webpack-plugin');
const autoprefixer = require('autoprefixer');
const Fiber = require('fibers');

const prod = {
  module: {
    rules: [
      {
        test: /\.(css|sass|scss)$/,
        use: [{
          loader: MiniCssExtractPlugin.loader,
        },
        {
          loader: 'css-loader',
          options: {
            sourceMap: false,
            importLoaders: 2,
          },
        },
        {
          loader: 'postcss-loader',
          options: {
            plugins: () => [
              autoprefixer({
                grid: 'autoplace',
                flexbox: 'no-2009'
              }),