Updated webpack config for prod builds.

config/env/dev.env.js

@@ -1,3 +1,3 @@
 module.exports = {
-  NODE_ENV: "development"
+  NODE_ENV: 'development'
 };

config/helpers.js

@@ -1,8 +1,8 @@
-"use strict";
+'use strict';
 
-const path = require("path");
+const path = require('path');
 
-const _root = path.resolve(__dirname, "..");
+const _root = path.resolve(__dirname, '..');
 
 exports.root = function(args) {
   args = Array.prototype.slice.call(arguments, 0);
@@ -11,5 +11,5 @@ exports.root = function(args) {
 };
 
 exports.assetsPath = function(_path) {
-  return path.posix.join("static", _path);
+  return path.posix.join('static', _path);
 };

config/planetposen.config.js

@@ -0,0 +1,28 @@
+"use strict";
+
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const helpers = require("./helpers");
+
+const VinlottisConfig = {
+  entry: {
+    planetposen: ["@babel/polyfill", helpers.root("frontend", "main")]
+  },
+  optimization: {
+    minimizer: [
+      new HtmlWebpackPlugin({
+        chunks: ["planetposen"],
+        filename: "../index.html",
+        template: "./frontend/index.html",
+        inject: true,
+        minify: {
+          removeComments: true,
+          collapseWhitespace: false,
+          preserveLineBreaks: true,
+          removeAttributeQuotes: true
+        }
+      })
+    ]
+  }
+};
+
+module.exports = VinlottisConfig;

config/webpack.config.common.js

@@ -2,18 +2,17 @@
 
 const VueLoaderPlugin = require("vue-loader/lib/plugin");
 const MiniCSSExtractPlugin = require("mini-css-extract-plugin");
+const HtmlPlugin = require("html-webpack-plugin");
 const helpers = require("./helpers");
-const isDev = process.env.NODE_ENV === "development";
+
+// const {GenerateSW} = require('workbox-webpack-plugin');
 
 const webpackConfig = function(isDev) {
   return {
-    entry: {
-      main: ["@babel/polyfill", helpers.root("frontend", "main")]
-    },
     resolve: {
       extensions: [".js", ".vue"],
       alias: {
-        vue$: isDev ? "vue/dist/vue.runtime.js" : "vue/dist/vue.runtime.min.js",
+        vue$: isDev ? "vue/dist/vue.min.js" : "vue/dist/vue.min.js",
         "@": helpers.root("frontend")
       }
     },
@@ -21,13 +20,22 @@ const webpackConfig = function(isDev) {
       rules: [
         {
           test: /\.vue$/,
-          loader: "vue-loader",
+          use: [
-          include: [helpers.root("frontend")]
+            {
+              loader: "vue-loader",
+              options: {
+                loaders: {
+                  scss: "vue-style-loader!css-loader!sass-loader",
+                  sass: "vue-style-loader!css-loader!sass-loader?indentedSyntax"
+                }
+              }
+            }
+          ]
         },
         {
           test: /\.js$/,
           loader: "babel-loader",
-          include: [helpers.root("frontend")]
+          include: [helpers.root("src")]
         },
         {
           test: /\.css$/,
@@ -52,41 +60,29 @@ const webpackConfig = function(isDev) {
             { loader: "sass-loader", options: { sourceMap: isDev } }
           ]
         },
-        // {
-        //   test: /\.s(c|a)ss$/,
-        //   use: [
-        //     'vue-style-loader',
-        //     'css-loader',
-        //     {
-        //       loader: 'sass-loader',
-        //       // Requires sass-loader@^7.0.0
-        //       options: {
-        //         implementation: require('sass'),
-        //         fiber: require('fibers'),
-        //         indentedSyntax: true // optional
-        //       },
-        //       // Requires sass-loader@^8.0.0
-        //       options: {
-        //         implementation: require('sass'),
-        //         sassOptions: {
-        //           fiber: require('fibers'),
-        //           indentedSyntax: true // optional
-        //         },
-        //       },
-        //     },
-        //   ],
-        // },
         {
           test: /\.woff(2)?(\?[a-z0-9]+)?$/,
-          loader: 'url-loader?limit=10000&mimetype=application/font-woff'
+          loader: "url-loader?limit=10000&mimetype=application/font-woff"
         },
         {
           test: /\.(ttf|eot|svg)(\?[a-z0-9]+)?$/,
-          loader: 'file-loader'
+          loader: "file-loader"
         }
       ]
     },
-    plugins: [new VueLoaderPlugin()]
+    plugins: [
+      new VueLoaderPlugin(),
+      // new GenerateSW({
+      //   swSrc: "./public/service-worker.js",
+      //   swDest: './sw.js',
+      //   clientsClaim: true,
+      //   skipWaiting: true,
+      //   runtimeCaching: [{
+      //     urlPattern: new RegExp('https://www.google-analytics.com/analytics.js'),
+      //     handler: 'StaleWhileRevalidate'
+      //   }]
+      // })
+    ]
   };
 };
 

config/webpack.config.dev.js

@@ -8,7 +8,7 @@ const helpers = require("./helpers");
 const commonConfig = require("./webpack.config.common");
 const environment = require("./env/dev.env");
 
-const webpackConfig = merge(commonConfig(true), {
+let webpackConfig = merge(commonConfig(true), {
   mode: "development",
   devtool: "cheap-module-eval-source-map",
   output: {
@@ -26,19 +26,29 @@ const webpackConfig = merge(commonConfig(true), {
   plugins: [
     new webpack.EnvironmentPlugin(environment),
     new webpack.HotModuleReplacementPlugin(),
-    new FriendlyErrorsPlugin(),
+    new FriendlyErrorsPlugin()
-    new HtmlPlugin({ template: "frontend/index.html", chunksSortMode: "dependency" })
   ],
   devServer: {
     compress: true,
     historyApiFallback: true,
     hot: true,
     overlay: true,
-    port: 8080,
     stats: {
       normal: true
     }
   }
 });
 
+webpackConfig = merge(webpackConfig, {
+  entry: {
+    main: ["@babel/polyfill", helpers.root("src", "vinlottis-init")]
+  },
+  plugins: [
+    new HtmlPlugin({
+      template: "src/templates/Index.html",
+      chunksSortMode: "dependency"
+    })
+  ]
+});
+
 module.exports = webpackConfig;

config/webpack.config.prod.js

@@ -1,11 +1,11 @@
 "use strict";
 
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 const webpack = require("webpack");
 const merge = require("webpack-merge");
 const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 const MiniCSSExtractPlugin = require("mini-css-extract-plugin");
 const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
-const CompressionPlugin = require("compression-webpack-plugin");
 const helpers = require("./helpers");
 const commonConfig = require("./webpack.config.common");
 const isProd = process.env.NODE_ENV === "production";
@@ -16,11 +16,22 @@ const environment = isProd
 const webpackConfig = merge(commonConfig(false), {
   mode: "production",
   output: {
-    path: helpers.root("dist"),
+    path: helpers.root("public/dist"),
-    publicPath: "/",
+    publicPath: "/dist/",
-    filename: "js/[name].bundle.js"
+    filename: "js/[name].bundle.[hash:7].js"
+    //filename: 'js/[name].bundle.js'
   },
   optimization: {
+    splitChunks: {
+      cacheGroups: {
+        styles: {
+          name: "styles",
+          test: /\.css$/,
+          chunks: "all",
+          enforce: true
+        }
+      }
+    },
     minimizer: [
       new OptimizeCSSAssetsPlugin({
         cssProcessorPluginOptions: {
@@ -35,9 +46,10 @@ const webpackConfig = merge(commonConfig(false), {
     ]
   },
   plugins: [
+    new CleanWebpackPlugin(),
     new webpack.EnvironmentPlugin(environment),
     new MiniCSSExtractPlugin({
-      filename: "css/[name].css"
+      filename: "css/[name].[hash:7].css"
     })
   ]
 });

webpack.config.js

@@ -1,9 +1,11 @@
 "use strict";
 
 const environment = (process.env.NODE_ENV || "development").trim();
+const merge = require("webpack-merge");
 
 if (environment === "development") {
   module.exports = require("./config/webpack.config.dev");
 } else {
-  module.exports = require("./config/webpack.config.prod");
+  let prodConfig = require("./config/webpack.config.prod");
+  module.exports = merge(prodConfig, require("./config/planetposen.config.js"));
 }