Webpack 4：mini-css-extract-plugin+sass-loader+splitChunks配置咨询

Hey Andrea, let's break down how to optimize your Webpack 4 setup with mini-css-extract-plugin, sass-loader, and splitChunks—plus tackle common pain points you might run into with your current config.

By default, Webpack's splitChunks focuses primarily on JavaScript. To properly split shared CSS across your entries (a and b), you'll need to add a dedicated cache group for styles:

splitChunks: {
  chunks: 'all', // Ensure both initial and async chunks are processed
  cacheGroups: {
    // Split vendor CSS from node_modules (if any)
    vendorStyles: {
      test: /[\\/]node_modules[\\/].*\.(css|sass|scss)$/,
      name: 'vendor-styles',
      chunks: 'all',
      priority: 20, // Higher priority than shared styles
      enforce: true
    },
    // Split CSS used by 2+ entries into a shared bundle
    sharedStyles: {
      name: 'shared-styles',
      test: /\.(css|sass|scss)$/,
      chunks: 'all',
      minChunks: 2, // Only split if used by at least 2 entries
      priority: 10,
      enforce: true
    }
  }
}

This setup eliminates duplicate CSS across your a.css and b.css bundles and isolates vendor-specific styles for better caching.

Your current loader chain is solid, but here are some refinements:

• Simplify PostCSS setup
  Instead of defining autoprefixer directly in your Webpack config, use a dedicated postcss.config.js file. This keeps your Webpack config clean and makes it easier to add other PostCSS plugins (like cssnano for compression):

  // postcss.config.js (project root)
  module.exports = {
    plugins: [
      require('autoprefixer'),
      // Add CSS compression for production only
      process.env.NODE_ENV === 'production' ? require('cssnano') : null
    ].filter(Boolean)
  };
  

  Then update your postcss-loader config to remove the inline plugin definition:

  { loader: 'postcss-loader', options: { sourceMap: true } }
  

• Optimize SourceMaps for environment
  SourceMaps add overhead—tailor them to your environment:

  const isProduction = process.env.NODE_ENV === 'production';
  
  // In each loader's options, set sourceMap to:
  sourceMap: isProduction ? 'source-map' : 'eval-source-map'
  

  eval-source-map is faster for development, while source-map provides high-quality maps for production without exposing source code in bundles.

• Switch to Dart Sass
  node-sass is deprecated—switch to dart-sass (now just sass) for faster compilation and better feature support:

  // First install via npm: npm install sass
  {
    loader: 'sass-loader',
    options: {
      sourceMap: true,
      implementation: require('sass')
    }
  }
  

Here are fixes for issues you might encounter:

• CSS not extracting to separate files
  Double-check that you've initialized MiniCssExtractPlugin in your plugins array, with production-friendly filenames for caching:

  plugins: [
    new MiniCssExtractPlugin({
      filename: isProduction ? '[name].[contenthash].css' : '[name].css',
      chunkFilename: isProduction ? '[id].[contenthash].css' : '[id].css',
      ignoreOrder: true // Suppress CSS order warnings (if needed)
    })
  ]
  

  Also ensure splitChunks.chunks is set to 'all' to cover async chunks.

• Duplicate CSS in bundles
  Your css-loader already has importLoaders: 2 (correct for postcss-loader and sass-loader), which ensures @imported SCSS files pass through all loaders. The sharedStyles cache group we added earlier will handle duplicate imports across entries.

• Slow development builds
  Replace MiniCssExtractPlugin.loader with style-loader in development—it injects styles directly into the DOM, enabling faster hot module replacement (HMR):

  const styleLoader = isProduction ? MiniCssExtractPlugin.loader : 'style-loader';
  
  // Update your loader chain's first entry:
  use: [styleLoader, /* rest of loaders */]
  

• Cache compiled Sass
  Add cache-loader before sass-loader to cache compilation results, cutting down on repeated build times:

  // Install via npm: npm install cache-loader
  use: [
    styleLoader,
    'css-loader',
    'postcss-loader',
    'cache-loader',
    { loader: 'sass-loader', options: { /* ... */ } }
  ]
  

• Parallelize Sass compilation
  For large codebases, use thread-loader to offload Sass compilation to worker threads:

  // Install via npm: npm install thread-loader
  use: [
    styleLoader,
    'css-loader',
    'postcss-loader',
    'thread-loader',
    { loader: 'sass-loader', options: { /* ... */ } }
  ]
  

内容的提问来源于stack exchange，提问作者Andrea Moraglia