katbin/assets/build.js
Akshit Garg 3f5b1d10ac
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>
2021-08-21 17:41:46 +05:30

38 lines
1.0 KiB
JavaScript

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);
});