From 713226f30b4aba0f7f1bba2d0d5e6ff4f3547894 Mon Sep 17 00:00:00 2001
From: Pierre-Dominique Putallaz <pierredominique.putallaz@gmail.com>
Date: Tue, 27 Mar 2018 14:36:25 +0200
Subject: [PATCH] Add documentation in README.md about how to extract all CSS
 in one file

---
 README.md | 41 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/README.md b/README.md
index 87c73feb..ab81923c 100644
--- a/README.md
+++ b/README.md
@@ -76,6 +76,47 @@ The `href` of the `<link>` tag has to match the URL that will be used for loadin
 The `data-href` attribute can be used for `<link>` and `<style>` too.
 When inlining CSS `data-href` must be used.
 
+#### Extracting all CSS in a single file
+
+Similar to what [extract-text-webpack-plugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) does, the CSS
+can be extracted in one CSS file using `optimization.splitChunks.cacheGroups`.
+
+**webpack.config.js**
+
+```js
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+module.exports = {
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        styles: {
+          name: 'styles',
+          test: /\.css$/,
+          chunks: 'all',
+          enforce: true
+        }
+      }
+    }
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: "[name].css",
+    })
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          "css-loader"
+        ]
+      }
+    ]
+  }
+}
+```
+
 <h2 align="center">Maintainers</h2>
 
 <table>