{"id":20021,"library":"extract-css-chunks-webpack-plugin","title":"Extract CSS Chunks Webpack Plugin","description":"A webpack plugin that extracts CSS from chunks into separate stylesheets with Hot Module Replacement (HMR) support. Current stable version is 4.10.0 (last released November 2020). It is a fork/enhancement of mini-css-extract-plugin, adding HMR and SSR compatibility. Supports Webpack 4 and 5, ships TypeScript declarations, and is designed for code-splitting applications. Key differentiator: built-in HMR for extracted CSS files without additional loaders, and chunk-based CSS extraction for universal (SSR) apps. Active maintenance status as of 2020, but no recent releases.","status":"maintenance","version":"4.10.0","language":"javascript","source_language":"en","source_url":"https://github.com/faceyspacey/extract-css-chunks-webpack-plugin","tags":["javascript","css","chunks","code splitting","mini-css","hot","hmr","universal","webpack","typescript"],"install":[{"cmd":"npm install extract-css-chunks-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add extract-css-chunks-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add extract-css-chunks-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required to function as a plugin.","package":"webpack","optional":false}],"imports":[{"note":"CommonJS default export is the correct pattern; ESM default import may fail in some bundler versions. TypeScript users should also use require or set esModuleInterop.","wrong":"import ExtractCssChunks from 'extract-css-chunks-webpack-plugin';","symbol":"default (ExtractCssChunks)","correct":"const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');"},{"note":"The loader is accessed as a static property on the plugin instance, not via subpath.","wrong":"require('extract-css-chunks-webpack-plugin/dist/loader')","symbol":"loader","correct":"ExtractCssChunks.loader"},{"note":"TypeScript types are included and automatically resolved when importing the package. No separate type import needed.","wrong":"","symbol":"Types","correct":"const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');"}],"quickstart":{"code":"// webpack.config.js\nconst path = require('path');\nconst ExtractCssChunks = require('extract-css-chunks-webpack-plugin');\n\nmodule.exports = {\n  mode: 'production',\n  entry: './src/index.js',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: '[name].[contenthash].js',\n    publicPath: '/',\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          {\n            loader: ExtractCssChunks.loader,\n            options: {\n              // Enable HMR in development\n              hmr: process.env.NODE_ENV === 'development',\n            },\n          },\n          'css-loader',\n        ],\n      },\n    ],\n  },\n  plugins: [\n    new ExtractCssChunks({\n      filename: '[name].[contenthash].css',\n      chunkFilename: '[id].[contenthash].css',\n    }),\n  ],\n};\n","lang":"javascript","description":"Basic webpack config showing usage of ExtractCssChunks plugin with its loader, including HMR option and CSS extraction in production."},"warnings":[{"fix":"Set options.hmr to false or omit it in production, or use webpack mode differentiation.","message":"HMR only works in development mode. Do not enable HMR in production.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Set output.publicPath to '/' or your CDN URL.","message":"Must set output.publicPath to a non-empty value for CSS chunks to resolve correctly in some cases.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Replace with mini-css-extract-plugin if HMR not required.","message":"The plugin is based on mini-css-extract-plugin; consider migrating if you don't need HMR.","severity":"deprecated","affected_versions":">=4.0.0"},{"fix":"Ensure you are using a compatible version; test with Webpack 5 explicitly.","message":"Async CSS chunks may not apply correctly in Webpack 5 without proper configuration.","severity":"gotcha","affected_versions":"<5.0.0 >=4.10.0"},{"fix":"Upgrade to v4.8.0+ which fixes Safari render blocking.","message":"The insert option (for custom placement of style tags) may cause render blocking in Safari if misconfigured.","severity":"gotcha","affected_versions":">=4.0.0 <4.8.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run `npm install extract-css-chunks-webpack-plugin --save-dev` or `yarn add extract-css-chunks-webpack-plugin --dev`.","cause":"Package not installed or missing from node_modules.","error":"Module not found: Can't resolve 'extract-css-chunks-webpack-plugin'"},{"fix":"Upgrade extract-css-chunks-webpack-plugin to v4.10.0 or later, which supports Webpack 5.","cause":"Using an older version of the plugin with Webpack 5.","error":"Error: Chunk.entryModule was removed; use ChunkGraph"},{"fix":"Check plugin options: use 'filename' and 'chunkFilename' strings (not functions).","cause":"Incorrect plugin options, e.g., misspelled 'filename' or 'chunkFilename'.","error":"Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema."},{"fix":"Ensure rules for .css files include ExtractCssChunks.loader before css-loader.","cause":"Loader not applied correctly; missing ExtractCssChunks.loader in webpack config.","error":"TypeError: Cannot read property 'id' of undefined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}