How to use extract-css-chunks-webpack-plugin - 10 common examples

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);
                            },
                        },

exclude: /a\.js|node_modules/,
            // show a warning when there is a circular dependency
            failOnError: false,
          })
        : null,

      _IS_DEV_
        ? new WriteFilePlugin({
            exitOnErrors: false,
            log: true,
            // required not to cache removed files
            useHashIndex: false,
          })
        : null,

      _IS_CLIENT_ ? new ExtractCssChunks() : null,

      _IS_SERVER_ ? new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }) : null,
      _IS_PROD_ ? new webpack.optimize.ModuleConcatenationPlugin() : null,

      // "Use HashedModuleIdsPlugin to generate IDs that preserves over builds."
      // @see: https://github.com/webpack/webpack.js.org/issues/652#issuecomment-273324529
      _IS_PROD_ && _IS_CLIENT_ ? new webpack.HashedModuleIdsPlugin() : null,
      // Extract Webpack bootstrap code with knowledge about chunks into separate cachable package.
      // explicit-webpack-runtime-chunk
      _IS_CLIENT_ && _IS_PROD_
        ? new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: module => /node_modules/.test(module.resource),
          })
        : null,
      // Extract Webpack bootstrap code with knowledge about chunks into separate cachable package.

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

use: [
            cacheLoader,
            {
              loader: "babel-loader",
              options: {
                ...(isProduction ? productionBabelOptions : developmentBabelOptions),
                babelrc: false
              }
            }
          ].filter(Boolean)
        },

        // Use either
        {
          test: postcssFiles,
          use: isClient ? ExtractCssChunks.extract({
            use: [
              cacheLoader,
              {
                loader: "css-loader",
                options: cssLoaderOptions
              },
              postCSSLoaderRule
            ].filter(Boolean)
          }) : [
            cacheLoader,
            {
              loader: "css-loader/locals",
              options: cssLoaderOptions
            },
            postCSSLoaderRule
          ].filter(Boolean)