Working now

config/env/dev.env.js

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

config/env/prod.env.js

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

config/env/staging.env.js

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

config/helpers.js

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

config/vinlottis.config.js

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

config/webpack.config.common.js

@@ -0,0 +1,75 @@
+"use strict";
+
+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 webpackConfig = function(isDev) {
+  return {
+    resolve: {
+      extensions: [".js", ".vue"],
+      alias: {
+        vue$: isDev ? "vue/dist/vue.min.js" : "vue/dist/vue.min.js",
+        "@": helpers.root("src")
+      }
+    },
+    module: {
+      rules: [
+        {
+          test: /\.vue$/,
+          use: [
+            {
+              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("src")]
+        },
+        {
+          test: /\.css$/,
+          use: [
+            isDev ? "vue-style-loader" : MiniCSSExtractPlugin.loader,
+            { loader: "css-loader", options: { sourceMap: isDev } }
+          ]
+        },
+        {
+          test: /\.scss$/,
+          use: [
+            isDev ? "vue-style-loader" : MiniCSSExtractPlugin.loader,
+            { loader: "css-loader", options: { sourceMap: isDev } },
+            { loader: "sass-loader", options: { sourceMap: isDev } }
+          ]
+        },
+        {
+          test: /\.sass$/,
+          use: [
+            isDev ? "vue-style-loader" : MiniCSSExtractPlugin.loader,
+            { loader: "css-loader", options: { sourceMap: isDev } },
+            { loader: "sass-loader", options: { sourceMap: isDev } }
+          ]
+        },
+        {
+          test: /\.woff(2)?(\?[a-z0-9]+)?$/,
+          loader: "url-loader?limit=10000&mimetype=application/font-woff"
+        },
+        {
+          test: /\.(ttf|eot|svg)(\?[a-z0-9]+)?$/,
+          loader: "file-loader"
+        }
+      ]
+    },
+    plugins: [new VueLoaderPlugin()]
+  };
+};
+
+module.exports = webpackConfig;

config/webpack.config.dev.js

@@ -0,0 +1,54 @@
+"use strict";
+
+const webpack = require("webpack");
+const merge = require("webpack-merge");
+const FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin");
+const HtmlPlugin = require("html-webpack-plugin");
+const helpers = require("./helpers");
+const commonConfig = require("./webpack.config.common");
+const environment = require("./env/dev.env");
+
+let webpackConfig = merge(commonConfig(true), {
+  mode: "development",
+  devtool: "cheap-module-eval-source-map",
+  output: {
+    path: helpers.root("dist"),
+    publicPath: "/",
+    filename: "js/[name].bundle.js",
+    chunkFilename: "js/[id].chunk.js"
+  },
+  optimization: {
+    runtimeChunk: "single",
+    splitChunks: {
+      chunks: "all"
+    }
+  },
+  plugins: [
+    new webpack.EnvironmentPlugin(environment),
+    new webpack.HotModuleReplacementPlugin(),
+    new FriendlyErrorsPlugin()
+  ],
+  devServer: {
+    compress: true,
+    historyApiFallback: true,
+    hot: true,
+    overlay: true,
+    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

@@ -0,0 +1,67 @@
+"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 helpers = require("./helpers");
+const commonConfig = require("./webpack.config.common");
+const isProd = process.env.NODE_ENV === "production";
+const environment = isProd
+  ? require("./env/prod.env")
+  : require("./env/staging.env");
+
+const webpackConfig = merge(commonConfig(false), {
+  mode: "production",
+  output: {
+    path: helpers.root("public/dist"),
+    publicPath: "/dist/",
+    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: {
+          preset: ["default", { discardComments: { removeAll: true } }]
+        }
+      }),
+      new UglifyJSPlugin({
+        cache: true,
+        parallel: false,
+        sourceMap: !isProd
+      })
+    ]
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    new webpack.EnvironmentPlugin(environment),
+    new MiniCSSExtractPlugin({
+      filename: "css/[name].[hash:7].css"
+    })
+  ]
+});
+
+if (!isProd) {
+  webpackConfig.devtool = "source-map";
+
+  if (process.env.npm_config_report) {
+    const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
+      .BundleAnalyzerPlugin;
+    webpackConfig.plugins.push(new BundleAnalyzerPlugin());
+  }
+}
+
+module.exports = webpackConfig;