How to use mini-css-extract-plugin - 10 common examples

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$/,

},
            
            // 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(),