MiniCssExtractPlugin

minicssextractplugin, commonly known as MiniCssExtractPlugin, is a webpack plugin that extracts CSS from JavaScript bundles into separate CSS files. This separation enables parallel loading of CSS, improves caching, and avoids inlining styles into the JavaScript bundle for production builds.

The plugin was introduced as a modern alternative to older approaches such as extract-text-webpack-plugin, aligning with code-splitting and long-term caching practices used in contemporary webpack configurations.

Usage is straightforward: install the plugin, configure webpack to handle CSS with the plugin’s loader, and add the plugin to the plugins section to define output file names. For example, install with npm or yarn, then in the webpack config set up CSS handling and plugin options. A typical setup looks like: install: npm install --save-dev mini-css-extract-plugin. In the webpack config, rules for CSS should use MiniCssExtractPlugin.loader and css-loader, and the plugins array should include new MiniCssExtractPlugin({ filename: '[name].css', chunkFilename: '[id].css' }). This setup produces separate CSS files corresponding to entry points and chunks.

Options include customizing the output filenames via filename and chunkFilename, and ignoring import order warnings with ignoreOrder. The plugin is designed for webpack 4 and later and is generally used in production builds. It does not provide hot module replacement for CSS; for development, style-loader is commonly used to enable CSS HMR.

See also: extract-text-webpack-plugin, css-loader, webpack.