From 2825df8a82e9aa49ba334f3de4d0ad556675559b Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Mon, 24 Aug 2020 22:24:32 +0800
Subject: Use mini-css-extract-plugin in production.

---
 Timeline/ClientApp/package.json           |  1 +
 Timeline/ClientApp/webpack.common.js      |  6 ------
 Timeline/ClientApp/webpack.config.dev.js  | 14 ++++++++++++++
 Timeline/ClientApp/webpack.config.prod.js | 17 +++++++++++++++++
 4 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/Timeline/ClientApp/package.json b/Timeline/ClientApp/package.json
index e45b6079..27974f72 100644
--- a/Timeline/ClientApp/package.json
+++ b/Timeline/ClientApp/package.json
@@ -93,6 +93,7 @@
     "html-webpack-plugin": "^3.2.0",
     "html-webpack-template": "^6.2.0",
     "http-server": "^0.12.3",
+    "mini-css-extract-plugin": "^0.10.0",
     "pnp-webpack-plugin": "^1.6.4",
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.7.0",
diff --git a/Timeline/ClientApp/webpack.common.js b/Timeline/ClientApp/webpack.common.js
index 2a619660..7d40fdce 100644
--- a/Timeline/ClientApp/webpack.common.js
+++ b/Timeline/ClientApp/webpack.common.js
@@ -33,9 +33,6 @@ config.module
 config.module
   .rule('css')
   .test(/\.css$/)
-  .use('style')
-  .loader('style-loader')
-  .end()
   .use('css')
   .loader('css-loader')
   .end()
@@ -49,9 +46,6 @@ config.module
 config.module
   .rule('sass')
   .test(/\.(scss|sass)$/)
-  .use('style')
-  .loader('style-loader')
-  .end()
   .use('css')
   .loader('css-loader')
   .end()
diff --git a/Timeline/ClientApp/webpack.config.dev.js b/Timeline/ClientApp/webpack.config.dev.js
index 840ac24a..2fb9e866 100644
--- a/Timeline/ClientApp/webpack.config.dev.js
+++ b/Timeline/ClientApp/webpack.config.dev.js
@@ -21,6 +21,20 @@ config.module
     plugins: ['react-hot-loader/babel'],
   });
 
+config.module
+  .rule('css')
+  .use('style')
+  .before('css')
+  .loader('style-loader')
+  .end();
+
+config.module
+  .rule('sass')
+  .use('style')
+  .before('css')
+  .loader('style-loader')
+  .end();
+
 config.devtool('eval-cheap-module-source-map');
 
 config.resolve.alias.set('react-dom', '@hot-loader/react-dom');
diff --git a/Timeline/ClientApp/webpack.config.prod.js b/Timeline/ClientApp/webpack.config.prod.js
index e3ef65e1..5a83a3b8 100644
--- a/Timeline/ClientApp/webpack.config.prod.js
+++ b/Timeline/ClientApp/webpack.config.prod.js
@@ -2,6 +2,7 @@ const path = require('path');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
 const WorkboxPlugin = require('workbox-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const config = require('./webpack.common');
 
@@ -11,8 +12,24 @@ config
   .entry('index')
   .add(path.resolve(__dirname, 'src/app/service-worker.tsx'));
 
+config.module
+  .rule('css')
+  .use('mini-css-extract')
+  .before('css')
+  .loader(MiniCssExtractPlugin.loader)
+  .end();
+
+config.module
+  .rule('sass')
+  .use('mini-css-extract')
+  .before('css')
+  .loader(MiniCssExtractPlugin.loader)
+  .end();
+
 config.devtool('source-map');
 
+config.plugin('mini-css-extract').use(MiniCssExtractPlugin);
+
 config.plugin('clean').use(CleanWebpackPlugin);
 
 config.plugin('copy').use(CopyPlugin, [
-- 
cgit v1.2.3