Updating webpack configs

package.json

@@ -5,7 +5,12 @@
     "build": "webpack --config webpack.prod.js",
     "watch": "webpack --watch --progress --colors --config webpack.dev.js"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@babel/core": "^7.9.6",
+    "@babel/preset-env": "^7.9.6",
+    "assets-webpack-plugin": "^3.9.12",
+    "babel-loader": "^8.1.0"
+  },
   "devDependencies": {
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11"

webpack.common.js

@@ -1,10 +1,37 @@
-const webpack = require('webpack')
+const webpack = require("webpack");
-const path = require('path')
+const path = require("path");
+const AssetsPlugin = require("assets-webpack-plugin");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 
 module.exports = {
-    mode: 'development',
+  mode: "development",
-    entry: path.resolve(__dirname, 'src/main.js'),
+  devtool: "source-map",
-    output: {
+  entry: path.resolve(__dirname, "src/main.js"),
-        path: path.resolve(__dirname, 'static/dist')
+  output: {
-    }
+    path: path.resolve(__dirname, "dist"),
-}
+  },
+  module: {
+    rules: [
+      {
+        test: /\.m?js$/,
+        exclude: /node_modules/,
+        loader: "babel-loader",
+      },
+    ],
+  },
+  plugins: [
+    new CleanWebpackPlugin({
+      cleanAfterEveryBuildPatterns: ["dist/*"],
+    }),
+    new AssetsPlugin({
+      filename: "assets.json",
+      path: path.resolve(__dirname, "data/panaetius-theme"),
+      prettyPrint: true,
+      fullPath: false,
+    }),
+    new webpack.ProvidePlugin({
+      $: "jquery",
+      jquery: "jquery",
+    }),
+  ],
+};

webpack.prod.js

@@ -0,0 +1,13 @@
+const webpack = require("webpack");
+const common = require("./webpack.common");
+const merge = require("webpack-merge");
+
+module.exports = merge(common, {
+  mode: "production",
+  devtool: "none",
+  output: {
+    filename: "[name].[contenthash].min.js",
+    chunkFilename: "[id].[name].[contenthash].min.js",
+    publicPath: "dist/",
+  },
+});