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"
   }
 }

config/dev.exs

@@ -13,10 +13,7 @@ config :ketbin, KetbinWeb.Endpoint,
   check_origin: false,
   watchers: [
     node: [
-      "node_modules/webpack/bin/webpack.js",
-      "--mode",
-      "development",
-      "--watch-stdin",
+      "build.js",
       cd: Path.expand("../assets", __DIR__)
     ]
   ]

lib/ketbin_web/endpoint.ex

@@ -24,7 +24,7 @@ defmodule KetbinWeb.Endpoint do
     at: "/",
     from: :ketbin,
     gzip: false,
-    only: ~w(css fonts images js favicon.ico robots.txt)
+    only: ~w(assets fonts images favicon.ico robots.txt)
 
   # Code reloading can be explicitly enabled under the
   # :code_reloader configuration of your endpoint.

lib/ketbin_web/templates/layout/app.html.eex

@@ -5,11 +5,11 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>Katbin</title>
-    <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
+    <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/assets/app.css") %>"/>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-    <script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
+    <script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/assets/app.js") %>"></script>
   </head>
   <body class="flex flex-col ">
     <header class="flex w-full justify-between items-center py-3 px-6">