CSS Split Webpack Plugin

0.2.6 verified Sat Apr 25 auth: no javascript deprecated

Splits large CSS bundles into multiple smaller files to work around the ~4000-selector limit in Internet Explorer 9. Wraps PostCSS-based splitting into a webpack plugin, designed to be used after ExtractTextPlugin. Latest version 0.2.6, last updated in 2016. Key differentiator: simple configuration with options for rule limit, preserving original file, and creating an import file. Not maintained; no TypeScript types.

Common errors

error TypeError: CSSSplitWebpackPlugin is not a constructor ↓

cause Using require without .default property, getting the default export object instead of constructor.

fix

Use require('css-split-webpack-plugin').default or import CSSSplitWebpackPlugin from 'css-split-webpack-plugin'.

error Unhandled rejection: Error: No CSS to split - did you add ExtractTextPlugin before this plugin? ↓

cause Plugin order wrong: CSSSplitWebpackPlugin placed before ExtractTextPlugin.

fix

Ensure ExtractTextPlugin appears first in plugins array.

Warnings

deprecated Package not updated since 2016. Webpack 4+ users may need alternatives. ↓

fix Consider modern alternatives like webpack-fix-style-only-entries or postcss-chunk.

gotcha Must be placed after ExtractTextPlugin in plugins array, otherwise CSS won't be processed. ↓

fix Order: new ExtractTextPlugin(...), new CSSSplitWebpackPlugin(...).

gotcha Default export is CommonJS .default; using require directly without .default returns an object with a default property. ↓

fix Use require('css-split-webpack-plugin').default or import plugin from 'css-split-webpack-plugin'.

Install

npm install css-split-webpack-plugin

yarn add css-split-webpack-plugin

pnpm add css-split-webpack-plugin

Imports

CSSSplitWebpackPlugin

wrong

const CSSSplitWebpackPlugin = require('css-split-webpack-plugin');

correct

import CSSSplitWebpackPlugin from 'css-split-webpack-plugin';

CommonJS require works but default export is .default; ESM import directly gets the default export.

default

wrong

const { default } = require('css-split-webpack-plugin').default;

correct

import { default as CSSSplitWebpackPlugin } from 'css-split-webpack-plugin';

Named import of default is unusual; prefer direct default import.

Quickstart

Demonstrates a complete webpack config using ExtractTextPlugin and CSSSplitWebpackPlugin, splitting after CSS extraction.

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CSSSplitWebpackPlugin = require('css-split-webpack-plugin').default;

module.exports = {
  entry: './index.js',
  context: __dirname,
  output: {
    path: __dirname + '/dist',
    publicPath: '/foo',
    filename: 'bundle.js',
  },
  module: {
    loaders: [{
      test: /\.css$/,
      loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),
    }],
  },
  plugins: [
    new ExtractTextPlugin('styles.css'),
    new CSSSplitWebpackPlugin({size: 4000}),
  ],
};