Created header and the start of a shopping cart.

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/webpack.config.common.js

@@ -0,0 +1,93 @@
+"use strict";
+
+const VueLoaderPlugin = require("vue-loader/lib/plugin");
+const MiniCSSExtractPlugin = require("mini-css-extract-plugin");
+const helpers = require("./helpers");
+const isDev = process.env.NODE_ENV === "development";
+
+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",
+        "@": helpers.root("frontend")
+      }
+    },
+    module: {
+      rules: [
+        {
+          test: /\.vue$/,
+          loader: "vue-loader",
+          include: [helpers.root("frontend")]
+        },
+        {
+          test: /\.js$/,
+          loader: "babel-loader",
+          include: [helpers.root("frontend")]
+        },
+        {
+          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: /\.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'
+        },
+        {
+          test: /\.(ttf|eot|svg)(\?[a-z0-9]+)?$/,
+          loader: 'file-loader'
+        }
+      ]
+    },
+    plugins: [new VueLoaderPlugin()]
+  };
+};
+
+module.exports = webpackConfig;

config/webpack.config.dev.js

@@ -0,0 +1,44 @@
+"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");
+
+const 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(),
+    new HtmlPlugin({ template: "frontend/index.html", chunksSortMode: "dependency" })
+  ],
+  devServer: {
+    compress: true,
+    historyApiFallback: true,
+    hot: true,
+    overlay: true,
+    port: 8080,
+    stats: {
+      normal: true
+    }
+  }
+});
+
+module.exports = webpackConfig;

config/webpack.config.prod.js

@@ -0,0 +1,55 @@
+"use strict";
+
+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";
+const environment = isProd
+  ? require("./env/prod.env")
+  : require("./env/staging.env");
+
+const webpackConfig = merge(commonConfig(false), {
+  mode: "production",
+  output: {
+    path: helpers.root("dist"),
+    publicPath: "/",
+    filename: "js/[name].bundle.js"
+  },
+  optimization: {
+    minimizer: [
+      new OptimizeCSSAssetsPlugin({
+        cssProcessorPluginOptions: {
+          preset: ["default", { discardComments: { removeAll: true } }]
+        }
+      }),
+      new UglifyJSPlugin({
+        cache: true,
+        parallel: false,
+        sourceMap: !isProd
+      })
+    ]
+  },
+  plugins: [
+    new webpack.EnvironmentPlugin(environment),
+    new MiniCSSExtractPlugin({
+      filename: "css/[name].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;