Webpack: split js and css into its own bundles

package.json

@@ -50,6 +50,7 @@
     "exports-loader": "^0.7.0",
     "expose-loader": "^0.7.5",
     "express": "^4.16.3",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "^1.1.6",
     "forex.analytics": "github:mkmarek/forex.analytics#7bc278987700d4204e959af17de61495941d1a14",
     "gdax": "^0.7.0",

templates/dashboard.ejs

@@ -22,7 +22,7 @@
 
     <title><%= asset.toUpperCase() %>/<%= currency.toUpperCase() %> on <%= exchange.name.toUpperCase() %> - Dashboard</title>
     <!-- Webpack compiled -->
-    <link href="assets-wp/app.bundle.js" rel="stylesheet">
+    <link href="assets-wp/app.bundle.css" rel="stylesheet">
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
     <!--[if lt IE 9]>

webpack.config.js

@@ -3,6 +3,7 @@
 const path = require('path')
 
 const webpack = require('webpack')
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
 
 module.exports = {
   entry: {
@@ -18,7 +19,8 @@ module.exports = {
       jQuery: 'jquery',
       'window.jQuery': 'jquery',
       Popper: ['popper.js', 'default'],
-    })
+    }),
+    new ExtractTextPlugin('[name].bundle.css'),
   ],
   output: {
     publicPath: '/assets-wp/',
@@ -48,7 +50,13 @@ module.exports = {
           loader: 'sass-loader' // compiles SASS to CSS
         }]
       },
-      { test: /\.css$/, loader: 'style-loader!css-loader' },
+      {
+        test: /\.css$/,
+        use: ExtractTextPlugin.extract({
+          fallback: "style-loader",
+          use: "css-loader"
+        })
+      },
       { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
       { test: /\.(woff|woff2)$/, loader:'url?prefix=font/&limit=5000' },
       { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' },