Webpack setup & required node packages.

config/defaults/development.json

@@ -0,0 +1,8 @@
+{
+  "database": {
+    "user": "blog",
+    "password": null,
+    "host": "localhost",
+    "database": "blog"
+  }
+}

config/defaults/production.json

@@ -0,0 +1,8 @@
+{
+  "database": {
+    "user": "blog",
+    "password": null,
+    "host": "localhost",
+    "database": "blog"
+  }
+}

config/helpers.js

@@ -0,0 +1,18 @@
+const path = require('path');
+
+const _root = path.resolve(__dirname, '..');
+
+class Helpers {
+};
+
+Helpers.root = function(args) {
+  args = Array.prototype.slice.call(arguments, 0);
+
+  return path.join.apply(path, [_root].concat(args));
+};
+
+Helpers.assetsPath = function(_path) {
+  return path.posix.join('public/assets', _path);
+};
+
+module.exports = Helpers;

config/webpack.config.common.js

@@ -0,0 +1,74 @@
+const webpack = require("webpack");
+const VueLoaderPlugin = require("vue-loader/lib/plugin");
+const MiniCSSExtractPlugin = require("mini-css-extract-plugin");
+const helpers = require("./helpers");
+
+const isProd = process.env.NODE_ENV === 'production';
+
+const webpackConfig = {
+  resolve: {
+    extensions: [".js", ".vue"],
+    alias: {
+      vue$: "vue/dist/vue.min.js",
+      "@": helpers.root("frontend")
+    }
+  },
+  entry: {
+    blog: helpers.root("frontend", "blog-init")
+  },
+  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$/,
+        use: [ "babel-loader" ],
+        include: [helpers.root("frontend")]
+      },
+      {
+        test: /\.css$/,
+        use: [
+          MiniCSSExtractPlugin.loader,
+          { loader: "css-loader", options: { sourceMap: !isProd } }
+        ]
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          MiniCSSExtractPlugin.loader,
+          { loader: "css-loader", options: { sourceMap: !isProd } },
+          { loader: "sass-loader", options: { sourceMap: !isProd } }
+        ]
+      },
+      {
+        test: /\.woff(2)?(\?[a-z0-9]+)?$/,
+        loader: "url-loader",
+        options: {
+          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,49 @@
+const webpack = require("webpack");
+const FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const helpers = require("./helpers");
+// const environment = require("./env/dev.env");
+const MiniCSSExtractPlugin = require("mini-css-extract-plugin");
+
+let webpackConfig = {
+  mode: "development",
+  devtool: "eval-cheap-module-source-map",
+  output: {
+    publicPath: "/",
+    filename: "js/[name].bundle.js"
+  },
+  optimization: {
+    concatenateModules: true,
+    splitChunks: {
+      chunks: "initial"
+    }
+  },
+  plugins: [
+    new FriendlyErrorsPlugin(),
+    new MiniCSSExtractPlugin({
+      filename: "css/[name].css"
+    }),
+    new HtmlWebpackPlugin({
+      template: "frontend/templates/Index.html"
+    })
+  ],
+  devServer: {
+    compress: true,
+    historyApiFallback: true,
+    host: "0.0.0.0",
+    hot: true,
+    overlay: true,
+    stats: {
+      normal: true
+    },
+    proxy: {
+      "/api": {
+        target: "http://localhost:30010",
+        changeOrigin: false
+      }
+    },
+    writeToDisk: false
+  }
+};
+
+module.exports = webpackConfig;

config/webpack.config.prod.js

@@ -0,0 +1,74 @@
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const path = require("path");
+const webpack = require("webpack");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const MiniCSSExtractPlugin = require("mini-css-extract-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
+
+const helpers = require("./helpers");
+
+const isProd = process.env.NODE_ENV === 'production';
+
+const webpackConfig = {
+  mode: "production",
+  stats: { children: false },
+  output: {
+    path: helpers.root("public/dist"),
+    publicPath: "/public/dist/",
+    filename: "js/[name].bundle.[fullhash:7].js"
+  },
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        styles: {
+          name: "styles",
+          test: /\.css$/,
+          chunks: "all",
+          enforce: true
+        }
+      }
+    },
+    minimize: true,
+    minimizer: [
+      new HtmlWebpackPlugin({
+        chunks: ["blog"],
+        filename: helpers.root("public/index.html"),
+        template: "./frontend/templates/Index.html",
+        inject: true,
+        minify: {
+          removeComments: true,
+          collapseWhitespace: false,
+          preserveLineBreaks: true,
+          removeAttributeQuotes: true
+        }
+      }),
+      new OptimizeCSSAssetsPlugin({
+        cssProcessorPluginOptions: {
+          preset: ["default", { discardComments: { removeAll: true } }]
+        }
+      }),
+      new TerserPlugin({
+        test: /\.js(\?.*)?$/i,
+      })
+    ]
+  },
+  plugins: [
+    new CleanWebpackPlugin(), // clean output folder
+    new MiniCSSExtractPlugin({
+      filename: "css/[name].[fullhash:7].css"
+    })
+  ]
+};
+
+if (!isProd) {
+  webpackConfig.devtool = "source-map";
+}
+
+// if (process.env.BUILD_REPORT) {
+//   const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
+//     .BundleAnalyzerPlugin;
+//   webpackConfig.plugins.push(new BundleAnalyzerPlugin());
+// }
+
+module.exports = webpackConfig;