Extracting stylesheet to separate file

package.json

@@ -40,10 +40,10 @@
     "babel-loader": "^8.0.6",
     "css-loader": "^3.2.0",
     "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.11.2",
     "node-sass": "^4.14.1",
     "sass-loader": "^8.0.0",
     "serialize-javascript": "^3.1.0",
-    "style-loader": "^1.0.0",
     "webpack": "^4.41.0",
     "webpack-cli": "^3.3.9",
     "webpack-dev-server": "^3.11.0",

webpack.config.js

@@ -2,6 +2,7 @@ const path = require('path');
 const fs = require('fs');
 
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const APP_DIR = fs.realpathSync(process.cwd());
 
@@ -48,8 +49,8 @@ module.exports = {
           }
         }
       },
-      { test: /\.css$/,  use: [ 'style-loader', 'css-loader'] },
-      { test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ] }
+      { test: /\.css$/,  use: [ MiniCssExtractPlugin.loader, 'css-loader'] },
+      { test: /\.scss$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ] }
     ]
   },
   devServer: {
@@ -64,6 +65,9 @@ module.exports = {
     new HtmlWebpackPlugin ({
       inject: 'head',
       template: resolveAppPath('public/index.html')
+    }),
+    new MiniCssExtractPlugin({
+      filename: 'recogito.min.css',
     })
   ]
 }