From 3d017a20dcbf0435fbb551eb05086273aa0d1f23 Mon Sep 17 00:00:00 2001
From: Alexey Lavinsky <cap-Bernardito@yandex.ru>
Date: Tue, 13 Oct 2020 14:31:31 +0300
Subject: [PATCH] docs: improve readme (#616)

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

diff --git a/README.md b/README.md
index 76f059e4..162bfc90 100644
--- a/README.md
+++ b/README.md
@@ -352,6 +352,43 @@ module.exports = {
 };
 ```
 
+### Common use case
+
+`mini-css-extract-plugin` is more often used in `production` mode to get separate css files.
+For `development` mode (including `webpack-dev-server`) you can use `style-loader`, because it injects CSS into the DOM using multiple <style></style> and works faster.
+
+> i Do not use together `style-loader` and `mini-css-extract-plugin`.
+
+**webpack.config.js**
+
+```js
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const devMode = process.env.NODE_ENV !== 'production';
+
+const plugins = [];
+if (!devMode) {
+  // enable in production only
+  plugins.push(new MiniCssExtractPlugin());
+}
+
+module.exports = {
+  plugins,
+  module: {
+    rules: [
+      {
+        test: /\.(sa|sc|c)ss$/,
+        use: [
+          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
+          'css-loader',
+          'postcss-loader',
+          'sass-loader',
+        ],
+      },
+    ],
+  },
+};
+```
+
 ### The `publicPath` option as function
 
 **webpack.config.js**