Extract CSS into separate files

Signed-off-by: Christian Wolf <github@christianwolf.email>

package.json

@@ -54,6 +54,7 @@
 		"eslint-plugin-vue": "^8.0.3",
 		"file-loader": "^6.0.0",
 		"lodash-webpack-plugin": "^0.11.5",
+		"mini-css-extract-plugin": "^2.4.5",
 		"prettier": "^2.2.1",
 		"stylelint": "^13.12.0",
 		"stylelint-config-idiomatic-order": "^8.1.0",

templates/index.php

@@ -1,5 +1,7 @@
 <?php
 script('cookbook', 'vue');
+// Import the css file from the built folder
+style('cookbook', '../js/vue');
 ?>
 
 <div id="app">

webpack.config.js

@@ -7,7 +7,8 @@
 const path = require('path')
 const { VueLoaderPlugin } = require('vue-loader')
 const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+const MiniCssExtractPlugin = require("mini-css-extract-plugin")
 
 module.exports = {
 
@@ -29,7 +30,10 @@ module.exports = {
             },
             {
                 test: /\.css$/,
-                use: [{ loader: 'vue-style-loader' }, 
+                use: [
+                    process.env.NODE_ENV !== 'production' ?
+                    MiniCssExtractPlugin.loader :
+                    { loader: 'vue-style-loader' },
                     {
                         loader: 'css-loader',
                         options: {
@@ -72,6 +76,8 @@ module.exports = {
             {
                 test: /\.scss$/,
                 use: [
+                    process.env.NODE_ENV !== 'production' ?
+                    MiniCssExtractPlugin.loader :
                     { loader: 'vue-style-loader' },
                     {
                         loader: 'css-loader',
@@ -86,8 +92,14 @@ module.exports = {
     },
     plugins: [
         new CleanWebpackPlugin(),
+        new MiniCssExtractPlugin({
+            // Options similar to the same options in webpackOptions.output
+            // both options are optional
+            filename: "[name].css",
+            // chunkFilename: "[id].css",
+          }),
         new VueLoaderPlugin(),
-        new LodashModuleReplacementPlugin
+        new LodashModuleReplacementPlugin,
     ],
     resolve: {
         extensions: ['*', '.js', '.vue', '.json'],

webpack.devel.js

@@ -3,6 +3,7 @@ const base = require('./webpack.build-dev.js')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 
 module.exports = merge(base, {
+    mode: "development",
     plugins: [
         new BundleAnalyzerPlugin(
             {