build: fix bundling using webpack

Plutonomicon · Jul 11, 2023 · 218b70c · 218b70c
1 parent e5c6014
commit 218b70c
Show file tree

Hide file tree

Showing 13 changed files with 1,265 additions and 1,425 deletions.
diff --git a/.gitignore b/.gitignore
@@ -20,6 +20,9 @@ result-*
 /dist/esbuild/*
 !/dist/esbuild/index.html
 !/dist/esbuild/wrapper.js
+!/dist/webpack/
+/dist/webpack/*
+!/dist/webpack/.gitkeep
 output.js
 .DS_Store
 .idea/

diff --git a/Makefile b/Makefile
@@ -1,32 +1,35 @@
 SHELL := bash
 .ONESHELL:
-.PHONY: run-dev run-build check-format format query-testnet-tip clean check-explicit-exports
+.PHONY: esbuild-bundle esbuild-serve webpack-bundle webpack-serve check-format format query-testnet-tip clean check-explicit-exports
 .SHELLFLAGS := -eu -o pipefail -c
 
 ps-sources := $(shell fd --no-ignore-parent -epurs)
 nix-sources := $(shell fd --no-ignore-parent -enix --exclude='spago*')
 js-sources := $(shell fd --no-ignore-parent -ejs)
 ps-entrypoint := Ctl.Examples.ByUrl # points to one of the example PureScript modules in examples/
-ps-bundle = spago bundle-module -m ${ps-entrypoint} --to output.js
 preview-node-ipc = $(shell docker volume inspect store_node-preview-ipc | jq -r '.[0].Mountpoint')
 preprod-node-ipc = $(shell docker volume inspect store_node-preprod-ipc | jq -r '.[0].Mountpoint')
 
-run-dev:
-	@${ps-bundle} --minify && BROWSER_RUNTIME=1 webpack-dev-server --progress
-
-run-build:
-	@${ps-bundle} && BROWSER_RUNTIME=1 webpack --mode=production
-
 esbuild-bundle:
-	@spago build && BROWSER_RUNTIME=1 node esbuild/bundle.js ${ps-entrypoint}
+	@spago build \
+		&& cp -rf fixtures dist/esbuild \
+		&& BROWSER_RUNTIME=1 node esbuild/bundle.js ${ps-entrypoint}
 
 esbuild-serve:
 	@spago build \
-		&& cd dist/esbuild \
-		&& ln -sfn ../../fixtures fixtures \
-		&& cd ../.. \
+		&& cp -rf fixtures dist/esbuild \
 		&& BROWSER_RUNTIME=1 node esbuild/serve.js ${ps-entrypoint}
 
+webpack-bundle:
+	@spago build \
+		&& rm -rf dist/webpack/* \
+		&& cp -rf fixtures/* dist/webpack \
+		&& BROWSER_RUNTIME=1 webpack --mode=production --env entry=./output/${ps-entrypoint}/index.js
+
+webpack-serve:
+	@spago build \
+		&& BROWSER_RUNTIME=1 webpack-dev-server --progress --env entry=./output/${ps-entrypoint}/index.js
+
 .ONESHELL:
 check-explicit-exports:
 	@if grep -rn '(\.\.)' ${ps-sources}; then

diff --git a/dist/esbuild/index.html b/dist/esbuild/index.html
@@ -5,7 +5,9 @@
 </head>
 
 <body>
-  <script type="module" src="wrapper.js"></script>
+  <script type="module">
+    import("./index.js").then(m => m.main());
+  </script>
   Examples source code is located in <i>examples/</i> directory.<br>
 </body>
 </html>
diff --git a/dist/esbuild/wrapper.js b/dist/esbuild/wrapper.js
diff --git a/dist/webpack/.gitkeep b/dist/webpack/.gitkeep
diff --git a/esbuild/bundle.js b/esbuild/bundle.js
diff --git a/esbuild/config.js b/esbuild/config.js
@@ -24,5 +24,5 @@ export const buildOptions = {
   platform: "browser",
   format: "esm",
   treeShaking: true,
-  logLevel: "warning",
+  logLevel: "error",
 };
diff --git a/esbuild/serve.js b/esbuild/serve.js
diff --git a/examples/index.html b/examples/index.html
@@ -5,7 +5,9 @@
 </head>
 
 <body>
-  <script type="module" src="./bundle.js"></script>
+  <script type="module">
+    import("./bundle.js").then(m => m.main());
+  </script>
   Examples source code is located in <i>examples/</i> directory.<br>
 </body>
 </html>