refactor(assets): swap webpack for esbuild

- Remove all webpack and babel related npm dependencies
- Add esbuild and esbuild-plugin-postcss2 as a dependency
- Add a custom `build.js` script to build css and js with esbuild
  and copy static files to the priv/static directory
- Modify `config/dev.exs` to use that build script as a watcher instead
  of webpack
- Modify `package.json` to use that build script in instead of webpack
- Modify `KetbinWeb.Endpoint` to serve the assets directory instead of
  css and js directories from static
- Modify the `app.html.eex` layout to use `assets` directory instead of
  separate css and js directories

Signed-off-by: Akshit Garg <garg.akshit@gmail.com>

assets/build.js

@@ -0,0 +1,37 @@
+const fs = require("fs-extra");
+const esbuild = require("esbuild");
+const { default: postCSSPlugin } = require("esbuild-plugin-postcss2");
+
+// PostCSS Plugins
+const autoprefixer = require("autoprefixer");
+const tailwindcss = require("tailwindcss");
+const postcssImport = require("postcss-import");
+
+const productionBuild = process.env.NODE_ENV === "production";
+fs.copySync("static/", "../priv/static/");
+
+console.log("[build.js] [info] Copying static files from static/");
+
+if (!productionBuild) {
+  console.log("[build.js] [info] Starting to watching assets for changes");
+} else {
+  console.log("[build.js] [info] Building assets in production mode");
+}
+
+esbuild
+  .build({
+    entryPoints: ["js/app.js"],
+    bundle: true,
+    outfile: "../priv/static/assets/app.js",
+    minify: productionBuild,
+    watch: !productionBuild,
+    plugins: [
+      postCSSPlugin({
+        plugins: [postcssImport, tailwindcss, autoprefixer],
+      }),
+    ],
+  })
+  .catch((e) => {
+    console.error(`[build.js] [error] ${e}`);
+    process.exit(1);
+  });

assets/js/app.js

@@ -1,7 +1,7 @@
 // We need to import the CSS so that webpack will load it.
 // The MiniCssExtractPlugin is used to separate it out into
 // its own CSS file.
-import "../css/app.css"
+import "../css/app.css";
 
 // webpack automatically bundles all modules in your
 // entry points. Those entry points can be configured
@@ -12,4 +12,4 @@ import "../css/app.css"
 //     import {Socket} from "phoenix"
 //     import socket from "./socket"
 //
-import "phoenix_html"
+import "phoenix_html";

assets/package.json

@@ -3,29 +3,20 @@
   "description": " ",
   "license": "MIT",
   "scripts": {
-    "deploy": "NODE_ENV=production webpack --mode production",
-    "watch": "webpack --mode development --watch"
+    "deploy": "NODE_ENV=production node build.js",
+    "watch": "node build.js"
   },
   "dependencies": {
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
     "autoprefixer": "^10.3.1",
-    "babel-loader": "^8.0.0",
-    "copy-webpack-plugin": "^5.1.1",
-    "css-loader": "^3.4.2",
-    "hard-source-webpack-plugin": "^0.13.1",
-    "mini-css-extract-plugin": "^0.9.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "esbuild": "^0.12.22",
+    "esbuild-plugin-postcss2": "0.0.9",
+    "fs-extra": "^10.0.0",
     "postcss": "^8.3.6",
     "postcss-import": "^14.0.2",
-    "postcss-loader": "^4.2.0",
-    "tailwindcss": "^2.2.7",
-    "terser-webpack-plugin": "^2.3.2",
-    "webpack": "^4.41.5",
-    "webpack-cli": "^3.3.2"
+    "tailwindcss": "^2.2.7"
   }
 }