Repository files navigation

mini-css-extract-plugin

desc

This plugin extract CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps.

It builds on top of a new webpack v4 feature (module types) and requires webpack 4 to work.

Compared to the extract-text-webpack-plugin:

• Async loading
• No duplicate compilation (performance)
• Easier to use
• Specific to CSS

TODO:

• HMR support

npm install --save-dev mini-css-extract-plugin

webpack.config.js

constMiniCssExtractPlugin=require("mini-css-extract-plugin");module.exports={plugins:[newMiniCssExtractPlugin({// Options similar to the same options in webpackOptions.output// both options are optionalfilename:"[name].css",chunkFilename:"[id].css"})],module:{rules:[{test:/\.css$/,use:[MiniCssExtractPlugin.loader,"css-loader"]}]}}

The runtime code detects already added CSS via<link> or<style> tag.This can be useful when injecting CSS on server-side for Server-Side-Rendering.Thehref of the<link> tag has to match the URL that will be used for loading the CSS chunk.Thedata-href attribute can be used for<link> and<style> too.When inlining CSSdata-href must be used.

Similar to whatextract-text-webpack-plugin does, the CSScan be extracted in one CSS file usingoptimization.splitChunks.cacheGroups.

webpack.config.js

constMiniCssExtractPlugin=require("mini-css-extract-plugin");module.exports={optimization:{splitChunks:{cacheGroups:{styles:{name:'styles',test:/\.css$/,chunks:'all',enforce:true}}}},plugins:[newMiniCssExtractPlugin({filename:"[name].css",})],module:{rules:[{test:/\.css$/,use:[MiniCssExtractPlugin.loader,"css-loader"]}]}}

Tobias Koppers

For long term caching usefilename: "[contenthash].css". Optionally add[name].