What is mini-css-extract-plugin?

webpack/mini-css-extract-plugin — explained in plain English

Analysis updated 2026-07-03

★ 4,663JavaScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((repo))
    What it does
      Extracts CSS to files
      Parallel loading
      On-demand styles
    Setup
      Plugin config
      Loader config
      npm install
    Options
      Output filename pattern
      Link tag placement
      ignoreOrder flag
    Requirements
      webpack 5
      html-webpack-plugin for HTML

mindmap root((repo)) What it does Extracts CSS to files Parallel loading On-demand styles Setup Plugin config Loader config npm install Options Output filename pattern Link tag placement ignoreOrder flag Requirements webpack 5 html-webpack-plugin for HTML

Click or tap to explore — scroll the page freely

What do people build with it?

USE CASE 1

Extract all imported CSS from a webpack bundle into standalone .css files so styles load in parallel with JavaScript.

USE CASE 2

Enable on-demand CSS loading so styles for sections the user has not visited yet stay unloaded until needed.

USE CASE 3

Improve returning-visitor performance by letting browsers cache CSS files separately from JavaScript bundles.

USE CASE 4

Configure custom output filename patterns and HTML link tag placement for CSS in a webpack 5 project.

What is it built with?

JavaScriptwebpackCSS

How does it compare?

	webpack/mini-css-extract-plugin	knownsec/kcon	jannchie/historical-ranking-data-visualization-based-on-d3.js
Stars	4,663	4,664	4,658
Language	JavaScript	JavaScript	JavaScript
Setup difficulty	easy	easy	easy
Complexity	2/5	2/5	1/5
Audience	developer	researcher	general

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 30min

Requires webpack 5, does not inject a link tag into HTML automatically for entry-point CSS without html-webpack-plugin.

So what is it?

This is a plugin for webpack, a tool that bundles JavaScript files together for use in a browser. Specifically, mini-css-extract-plugin handles CSS files inside that bundling process. When you write a web app and import CSS styles directly inside your JavaScript code, this plugin pulls those styles out into separate CSS files instead of mixing everything into one big bundle. The practical result is that your site can load CSS files on their own, independently of the JavaScript. This matters for page speed because the browser can download CSS and JavaScript in parallel, and it can cache the CSS file separately so returning visitors do not re-download styles that have not changed. The plugin also supports loading CSS files on demand, meaning styles for a page section you have not visited yet stay unloaded until you need them. Setting it up requires two pieces: the plugin itself, which you add to the plugins section of your webpack configuration, and a loader, which you add to the rules that tell webpack how to handle .css files. You install both with a single npm, yarn, or pnpm command. The README includes working code examples showing the exact configuration shape. There are several options you can tune. You can control the output filename pattern for CSS files, add custom HTML attributes to the link tags the plugin inserts, change where in the document those link tags get placed, or disable the link type attribute entirely. One option called ignoreOrder suppresses warnings that appear when the order CSS gets loaded might vary between pages. One thing to know upfront: the plugin does not automatically inject a link tag into your HTML for CSS that comes from your main entry point. For that, you either add the link tag by hand in your HTML file or use a companion plugin called html-webpack-plugin. This plugin requires webpack version 5 and does not work with older versions.

Copy-paste prompts

Prompt 1

Add mini-css-extract-plugin to my webpack 5 config. Show me the exact plugin and loader entries I need to add so imported CSS becomes a separate file.

Prompt 2

I'm using mini-css-extract-plugin and getting CSS order warnings. What does the ignoreOrder option do and is it safe to turn on?

Prompt 3

How do I get mini-css-extract-plugin to generate separate CSS files per code-split chunk so styles only load when that page section is visited?

Prompt 4

My webpack project uses mini-css-extract-plugin but the link tag doesn't appear in my HTML. How do I fix that using html-webpack-plugin alongside it?

Prompt 5

Show me how to configure mini-css-extract-plugin to output CSS files with a content hash in the filename for long-term browser caching.

Frequently asked questions