Use mini-css-extract-plugin in production.

1 files changed, 17 insertions, 0 deletions

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, [