Updated dev webpack config.

config/webpack.config.common.js

@@ -11,7 +11,7 @@ const webpackConfig = function(isDev) {
     resolve: {
       extensions: [".js", ".vue"],
       alias: {
-        vue$: isDev ? "vue/dist/vue.min.js" : "vue/dist/vue.min.js",
+        vue$: "vue/dist/vue.min.js",
         "@": helpers.root("frontend")
       }
     },
@@ -45,14 +45,14 @@ const webpackConfig = function(isDev) {
         {
           test: /\.css$/,
           use: [
-            isDev ? "vue-style-loader" : MiniCSSExtractPlugin.loader,
+            MiniCSSExtractPlugin.loader,
             { loader: "css-loader", options: { sourceMap: isDev } }
           ]
         },
         {
           test: /\.scss$/,
           use: [
-            isDev ? "vue-style-loader" : MiniCSSExtractPlugin.loader,
+            MiniCSSExtractPlugin.loader,
             { loader: "css-loader", options: { sourceMap: isDev } },
             { loader: "sass-loader", options: { sourceMap: isDev } }
           ]

config/webpack.config.dev.js

@@ -1,12 +1,13 @@
 "use strict";
 
 const webpack = require("webpack");
-const merge = require("webpack-merge");
+const { merge } = require("webpack-merge");
 const FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const helpers = require("./helpers");
 const commonConfig = require("./webpack.config.common");
 const environment = require("./env/dev.env");
+const MiniCSSExtractPlugin = require("mini-css-extract-plugin");
 
 let webpackConfig = merge(commonConfig(true), {
   mode: "development",
@@ -14,19 +15,20 @@ let webpackConfig = merge(commonConfig(true), {
   output: {
     path: helpers.root("dist"),
     publicPath: "/",
-    filename: "js/[name].bundle.js",
-    chunkFilename: "js/[id].chunk.js"
+    filename: "js/[name].bundle.js"
   },
   optimization: {
-    runtimeChunk: "single",
+    concatenateModules: true,
     splitChunks: {
-      chunks: "all"
+      chunks: "initial"
     }
   },
   plugins: [
     new webpack.EnvironmentPlugin(environment),
-    new webpack.HotModuleReplacementPlugin(),
-    new FriendlyErrorsPlugin()
+    new FriendlyErrorsPlugin(),
+    new MiniCSSExtractPlugin({
+      filename: "css/[name].css"
+    })
   ],
   devServer: {
     compress: true,
@@ -42,7 +44,7 @@ let webpackConfig = merge(commonConfig(true), {
 webpackConfig = merge(webpackConfig, {
   plugins: [
     new HtmlWebpackPlugin({
-      template: "src/templates/Index.html"
+      template: "frontend/templates/Index.html"
     })
   ]
 });

frontend/router.js

@@ -1,11 +1,11 @@
 const VinlottisPage = () => import(
-  /* webpackChunkName: "lading-page" */
+  /* webpackChunkName: "landing-page" */
   "@/components/VinlottisPage");
 const LotteryPage = () => import(
-  /* webpackChunkName: "lading-page" */
+  /* webpackChunkName: "landing-page" */
   "@/components/LotteryPage");
 const GeneratePage = () => import(
-  /* webpackChunkName: "lading-page" */
+  /* webpackChunkName: "landing-page" */
   "@/components/GeneratePage");
 
 const TodaysPage = () => import(