How to use the mini-css-extract-plugin function in mini-css-extract-plugin

},
            
            // extract single css file
            style: {
              test: m => m.constructor.name === 'CssModule',
              name: styleFileName,
              chunks: 'all',
              enforce: true,
            },
          },
        },
      },
      
      plugins: [
        // create css files
        new MiniCssExtractPlugin({
          filename: `${chunkPath}[name].[hash].css`,
          chunkFilename: `${chunkPath}[name].[hash].css`,
        }),
        
        // create size report
        new BundleAnalyzerPlugin({
          analyzerMode: 'static',
          reportFilename: path.join(output, 'size-report.html'),
          openAnalyzer: sizeReport,
        }),
        
        // create loadable-stats.json when server side rendering is enabled
        ...(extend.serverSideRendering ? [
          new LoadablePlugin({
            filename: '../loadable-stats.json',
            writeToDisk: true,

if (server) {
    // HMR is enabled by default but can be explicitly disabled
    if (server.hot !== false) {
      plugins.push(new webpack.HotModuleReplacementPlugin())
      optimization.noEmitOnErrors = true
    }
    if (buildConfig.status) {
      plugins.push(new StatusPlugin(buildConfig.status))
    }
  }
  // If we're not serving, we're creating a static build
  else {
    if (userConfig.extractCSS !== false) {
      // Extract imported stylesheets out into .css files
      plugins.push(new MiniCssExtractPlugin({
        filename: production ? `[name].[contenthash:8].css` : '[name].css',
        ...userConfig.extractCSS,
      }))
    }

    // Move modules imported from node_modules/ into a vendor chunk when enabled
    if (buildConfig.vendor) {
      optimization.splitChunks = {
        // Split the entry chunk too
        chunks: 'all',
        // A 'vendors' cacheGroup will get defaulted if it doesn't exist, so
        // we override it to explicitly set the chunk name.
        cacheGroups: {
          vendors: {
            name: 'vendor',
            priority: -10,

test: /\.(eot|ttf|otf|woff|woff2|ico|gif|png|jpe?g|svg)$/i,
                            use: {
                                loader: "url-loader",
                                options: {
                                    limit: 4096,
                                    name: "assets/[name].[hash].[ext]",
                                    // TODO webpack url/file-loader:
                                    //      drop "esModule" flag on https://github.com/webpack-contrib/html-loader/issues/203 resolving
                                    esModule: false,
                                },
                            },
                        },
                    ],
                },
                plugins: [
                    new MiniCssExtractPlugin(),
                ],
            },
        ),
        configPatch,
    );
}

publicUrl,
        config,
        productionManifestPath: locations.production.manifest,
      }),

      // This is necessary to emit hot updates (currently CSS only):
      isDev && new HotModuleReplacementPlugin(),

      // If you require a missing module and then `npm install` it, you still have
      // to restart the development server for Webpack to discover it. This plugin
      // makes the discovery automatic so you don't have to restart.
      // See https://github.com/facebook/create-react-app/issues/186
      isDev && new WatchMissingNodeModulesPlugin(locations.modules),

      isProd &&
        new MiniCssExtractPlugin({
          // Options similar to the same options in webpackOptions.output
          // both options are optional
          filename: 'static/css/[name].[contenthash:8].css',
          chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
        }),

      // Generate a manifest file which contains a mapping of all asset filenames
      // to their corresponding output file so that tools can pick it up without
      // having to parse `index.html`.
      new ManifestPlugin({
        fileName: 'asset-manifest.json',
        publicPath,
      }),

      deepScopeAnalysisEnabled && new WebpackDeepScopeAnalysisPlugin(),

assets: true
    }) as webpack.Plugin,
    new webpack.ProvidePlugin({
                                "$": "jquery",
                                "jQuery": "jquery",
                                "window.jQuery": "jquery"
                              }) as webpack.Plugin,
    new LicensePlugins(configOptions.licenseReportFile),
    new ForkTsCheckerWebpackPlugin({
                                     checkSyntacticErrors: true,
                                     useTypescriptIncrementalApi: true,
                                   })
  ];

  if (configOptions.production) {
    plugins.push(new MiniCssExtractPlugin({
                                            // Options similar to the same options in webpackOptions.output
                                            // both options are optional
                                            filename: "[name]-[hash].css",
                                            chunkFilename: "[id]-[hash].css",
                                          }));
    plugins.push(new OptimizeCssAssetsPlugin());
  } else {
    const jasmineFiles = jasmineCore.files;

    const entries = getEntries(configOptions);
    delete entries.specRoot;

    const jasmineIndexPage = {
      inject: true,
      xhtml: true,
      filename: "_specRunner.html",

new OptimizeCSSAssetsPlugin({}),
        ])

        config.optimization.splitChunks = merge(splitChunks, {
          cacheGroups: {
            styles: {
              test: (m: any) => test.test(m.type),
              name: 'styles',
              chunks: 'all',
              enforce: true,
            },
          },
        })

        config.plugins.push(
          new MiniCssExtractPlugin({
            filename: 'static/css/[name].[hash].css',
          })
        )
      }

      return config
    },
  })

*/
            new webpack.EnvironmentPlugin({
                NAME: options.name,
                PUBLIC_PATH: options.publicPath,
                TARGET: options.target,
            }),
            /**
             * Perform type checking and linting in a separate process to speed up compilation
             * @env all
             */
            getPluginForkTsCheckerWebpack(),
            /**
             * Extract css to file
             * @env production
             */
            new MiniCssExtractPlugin({
                chunkFilename: ifProduction(
                    "static/css/[name].[contenthash].css",
                    "static/css/main.css",
                ),
                filename: ifProduction(
                    "static/css/[name].[contenthash].css",
                    "static/css/main.css",
                ),
            }),
            getPluginBundleAnalyzer(options.stats),
            /**
             * Generate a manifest file which contains a mapping of all asset filenames
             * to their corresponding output file so that tools can pick it up without
             * having to parse `index.html`.
             *
             * @env production

],
                    },
                    {
                        test: /\.(eot|ttf|otf|woff|woff2|ico|gif|png|jpe?g|svg)$/i,
                        use: {
                            loader: "url-loader",
                            options: {
                                limit: 4096,
                                name: "assets/[name].[hash].[ext]",
                            },
                        },
                    },
                ],
            },
            plugins: [
                new MiniCssExtractPlugin(),
                new HtmlWebpackPlugin({
                    template: chunkPath("./index.ejs"),
                    filename: "index.html",
                    hash: ENVIRONMENT_SATE.production,
                    minify: false,
                }),
            ],
        },
        {
            tsConfigFile,
        },
    );

    const environmentBasedPatch: Record = {
        production: {},
        development: {

import webpack from 'webpack';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import CompressionPlugin from 'compression-webpack-plugin';
import baseConfig from './webpack.config.base';

const config = {
  ...baseConfig,
  entry: {
    index: ['babel-polyfill', './app/scripts/index'],
  },
  plugins: [
    ...baseConfig.plugins,
    new MiniCssExtractPlugin('styles.css'),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        screw_ie8: true,
        warnings: false,
      },
    }),
    new webpack.optimize.AggressiveMergingPlugin(),
    new CompressionPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: /\.(js|css|html)$/,
      threshold: 10240,
      minRatio: 0.8,
    }),
  ],
  module: {