Use webpack

fornwall · Jun 13, 2023 · b6faf63 · b6faf63
1 parent c44ecc0
commit b6faf63
Show file tree

Hide file tree

Showing 8 changed files with 4,092 additions and 12 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -37,11 +37,13 @@ jobs:
       run: brew update && brew install binaryen
     - uses: jetli/wasm-bindgen-action@v0.2.0
     - run: make WASM_RELEASE=1 generate-wasm
+    - run: npm run webpack -- --mode=production
+      working-directory: site
     - name: Publish
       uses: cloudflare/pages-action@1
       with:
         apiToken: ${{ secrets.CLOUDFLARE_PAGES_EDIT_API_TOKEN }}
         accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
         projectName: wgpu-game-of-life-fornwall-net
-        directory: site
+        directory: site/dist
         gitHubToken: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.gitignore b/.gitignore
@@ -13,3 +13,8 @@ target/
 .idea/
 
 site/generated/
+dist/
+node_modules/
+
+*.swp
+*.swo
diff --git a/Makefile b/Makefile
@@ -61,6 +61,6 @@ generate-wasm:
 	$(WASM_OPT) -o site/generated/wgpu_game_of_life_bg.wasm site/generated/wgpu_game_of_life_bg.wasm
 
 serve-wasm: generate-wasm
-	(sleep 1 && open http://localhost:8888) & cd site && python3 -m http.server 8888
+	cd site && npm run webpack serve -- --mode=development
 
 .PHONY: check macos-app run-app generate-wasm serve-wasm
diff --git a/site/index.html b/site/index.html
@@ -15,16 +15,6 @@
 </head>
 
 <body id="wasm-example">
-  <script type="module" src="resize.js"></script>
-  <script type="module">
-      import { resizeCanvasToDisplaySize } from "./resize.js";
-      import init from "./generated/wgpu_game_of_life.js";
-      init().then(() => {
-        console.log("WASM Loaded");
-        const canvas = document.getElementById("webgpu-canvas");
-        setTimeout(() => resizeCanvasToDisplaySize(canvas), 0);
-      });
-  </script>
 </body>
 
 </html>

diff --git a/site/index.js b/site/index.js
@@ -0,0 +1,9 @@
+import { resizeCanvasToDisplaySize } from "./resize.js";
+import init from "./generated/wgpu_game_of_life.js";
+init()
+  .then(() => {
+    console.log("WASM Loaded");
+    const canvas = document.getElementById("webgpu-canvas");
+    setTimeout(() => resizeCanvasToDisplaySize(canvas), 0);
+  });
+