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

function getStyleLoader(): webpack.RuleSetUse {
    return [
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
            loader: 'postcss-loader',
            options: {
                plugins: () => [
                    //   postcssFlexbugsFixes,
                    autoprefixer({
                        browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 9', 'iOS >= 8', 'Android >= 4'],
                    }),
                    pxtorem({
                        // todo change value
                        rootValue: 16,
                        propWhiteList: ['*'],
                    }),
                    cssnano({
                        preset: 'default',

use: [
          {
            loader: require.resolve("babel-loader"),
            options: {
              cacheDirectory: cacheDir,
              presets: [require("@phenomic/babel-preset")],
            },
          },
        ],
      },
      {
        test: /\.css$/,
        use: [
          process.env.PHENOMIC_ENV !== "static"
            ? "style-loader"
            : MiniCssExtractPlugin.loader,
          require.resolve("css-loader"),
        ],
      },
    ],
  },
  // $FlowFixMe lazy me
  plugins: [
    process.env.PHENOMIC_ENV === "static" &&
      new MiniCssExtractPlugin({
        filename: "phenomic/[name].[chunkhash:8].css",
        chunkFilename: "phenomic/[name].[chunkhash:8].chunk.css",
      }),
    (() => {
      const envVars = getClientEnvironment(config);
      return new webpack.DefinePlugin({
        "process.env": Object.keys(envVars).reduce((env, key) => {

const getStyleLoaders = ({
  cssOptions,
  preProcessor,
  dev
}: {
  cssOptions: any;
  preProcessor?: string;
  dev: boolean;
}) => {
  const loaders = [
    dev && require.resolve("style-loader"),
    !dev && {
      loader: MiniCssExtractPlugin.loader,
      options: Object.assign(
        {},
        shouldUseRelativeAssetPaths ? { publicPath: "../../" } : undefined
      )
    },
    {
      loader: require.resolve("css-loader"),
      options: cssOptions
    },
    {
      // Options for PostCSS as we reference these options twice
      // Adds vendor prefixing based on your specified browser support in
      // package.json
      loader: require.resolve("postcss-loader"),
      options: {
        // Necessary for external CSS imports to work

const getStyleLoaders = (cssOptions, preProcessor?) => {
    // TODO: 不清楚有什么用
    const shouldUseRelativeAssetPaths = false
    const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
        loader: MiniCssExtractPlugin.loader,
        options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
      },
      {
        loader: require.resolve('css-loader'),
        options: cssOptions,
      },
      { loader: 'scoped-css-loader' },
      {
        // Options for PostCSS as we reference these options twice
        // Adds vendor prefixing based on your specified browser support in
        // package.json
        loader: require.resolve('postcss-loader'),
        options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebook/create-react-app/issues/2677
          ident: 'postcss',

{
              loader: 'ts-loader',
              options: {
                compilerOptions: {
                  // allow to use dynamic import(),
                  // https://webpack.js.org/guides/code-splitting/#dynamic-imports
                  module: "esnext"
                }
              }
            }
          ]
        },
        {
          test: /\.s?css$/,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: "css-loader",
              options: {
                sourceMap: true
              }
            },
            {
              loader: "sass-loader",
              options: {
                prependData: '@import "' + commonVars + '";',
                sassOptions: {
                  includePaths: [srcPath]
                },
              }
            },
          ]

},

  output: {
    path: path.join(PATHS.app, 'dist'),
    publicPath: './dist/',
    filename: 'renderer.prod.js'
  },

  module: {
    rules: [
      // Extract all .global.css to style.css as is
      {
        test: /\.global\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: './'
            }
          },
          {
            loader: 'css-loader',
            options: {
              publicPath: './'
              // sourceMap: true
            }
          }
        ]
      },
      // Pipe other styles through css modules and append to style.css
      {
        test: /^((?!\.global).)*\.css$/,

export default function getConfig(fixture) {
  return {
    entry: { [fixture]: `./test/fixtures/${fixture}.js` },
    devtool: false,
    output: {
      path: path.join(__dirname, 'build'),
      filename: '[name].js',
    },

    module: {
      rules: [
        {
          test: /\.css$/,
          use: [MiniCssExtractPlugin.loader, cssLoader],
        },
        {
          test: /\.js$/,
          use: 'babel-loader',
        },
        {
          test: /\.js$/,
          use: [
            {
              loader: require.resolve('../src/loader'),
              options: { tagName: 'less' },
            },
          ],
        },
      ],
    },

],
              ],
              plugins: ['lodash', '@babel/plugin-proposal-class-properties'],
            },
          },
        },
        {
          test: /\.js$/,
          use: ['source-map-loader'],
          enforce: 'pre',
        },
        {
          test: /\.scss$/,
          use: [
            {
              loader: MiniCssExtractPlugin.loader,
            },
            {
              loader: 'css-loader',
            },
            {
              loader: 'sass-loader',
            },
          ],
        },
        {
          test: /\.(jpg|jpeg|png|gif|mp3|svg|ico)$/,
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
          },
        },

export function getModuleSCSSLoader(environment: string): RuleSetRule {
    const { ifDevelopment } = getIfUtils(environment);
    const postCssPlugin = () => [
        require("postcss-flexbugs-fixes"),
        autoprefixer({
            flexbox: "no-2009",
        }),
    ];
    return {
        test: /\.(scss|sass|css)$/i,
        use: removeEmpty([
            ifDevelopment({
                loader: require.resolve("css-hot-loader"),
            }),
            MiniCssExtractPlugin.loader,
            {
                loader: require.resolve("css-loader"),
            },
            {
                loader: require.resolve("postcss-loader"),
                options: {
                    ident: "postcss",
                    plugins: postCssPlugin,
                },
            },
            {
                loader: require.resolve("sass-loader"),
            },
        ]),
    };
}