Establishing the Development Workflow (#15)

Squashed Merge that includes these additions and changes

* simplify .gitignore

* Add common webpack config, placeholder dirs and files

* Align approach with RW's TS approach. Fix scripts to use webpack configs

* refactor webpack config, create canvas in index

* including prod webpack config in updates

* Adapt start scene snippet into Class

* Capture camera, env into StartScene class

* convert from class to component. Export createStartScene

* Add landing page markup

* Tweak landing page styles and markup

* tweak CSS

* remove source map from prod builds

* remove devtool (sourcemap) option

* Tighten up import statements to use tree-shaking

Before: 8.91 MiB
After: 3.11 MiB

* Change to preview v5 of BJS packages

package.json

@@ -25,14 +25,14 @@
   "homepage": "https://github.com/jelster/space-truckers#readme",
   "dependencies": {},
   "devDependencies": {
-    "@babylonjs/core": "^4.2.0",
-    "@babylonjs/gui": "^4.2.0",
-    "@babylonjs/inspector": "^4.2.0",
-    "@babylonjs/loaders": "^4.2.0",
-    "@babylonjs/materials": "^4.2.0",
-    "@babylonjs/post-processes": "^4.2.0",
-    "@babylonjs/procedural-textures": "^4.2.0",
-    "@babylonjs/serializers": "^4.2.0",
+    "@babylonjs/core": "^5.0.0-alpha.9 <= 5.0.0",
+    "@babylonjs/gui": "^5.0.0-alpha.9 <= 5.0.0",
+    "@babylonjs/inspector": "^5.0.0-alpha.9 <= 5.0.0",
+    "@babylonjs/loaders": "^5.0.0-alpha.9 <= 5.0.0",
+    "@babylonjs/materials": "^5.0.0-alpha.9 <= 5.0.0",
+    "@babylonjs/post-processes": "^5.0.0-alpha.9 <= 5.0.0",
+    "@babylonjs/procedural-textures": "^5.0.0-alpha.9 <= 5.0.0",
+    "@babylonjs/serializers": "^5.0.0-alpha.9 <= 5.0.0",
     "clean-webpack-plugin": "^3.0.0",
     "eslint": "^7.18.0",
     "file-loader": "^6.2.0",

src/index.js

@@ -1,4 +1,4 @@
-import { Engine } from "@babylonjs/core";
+import { Engine } from "@babylonjs/core/Engines/engine";
 import createStartScene from "./startscene";
 const CanvasName = "index-canvas";
 

src/startscene.js

@@ -1,18 +1,19 @@
-import {
-    MeshBuilder,
-    Color3,
-    Vector3,
-    Texture,
-    PointLight,
-    Scene,
-    StandardMaterial,
-    TrailMesh,
-    Scalar,
-    GlowLayer,
-    Animation,
-    ArcRotateCamera
-} from "@babylonjs/core";
-import { StarfieldProceduralTexture } from "@babylonjs/procedural-textures";
+import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder"
+import { Color3 } from "@babylonjs/core/Maths/math.color"
+import { Vector3 } from "@babylonjs/core/Maths/math.vector"
+import { Texture } from "@babylonjs/core/Materials/Textures/texture"
+import { PointLight } from "@babylonjs/core/Lights/pointLight"
+import { Scene } from "@babylonjs/core/scene"
+import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial"
+import { TrailMesh } from "@babylonjs/core/Meshes/trailMesh"
+import { Scalar } from "@babylonjs/core/Maths/math.scalar"
+import { GlowLayer } from "@babylonjs/core/Layers/glowLayer"
+import { Animation } from "@babylonjs/core/Animations/animation"
+import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
+import { StarfieldProceduralTexture } from "@babylonjs/procedural-textures/starfield/starfieldProceduralTexture";
+
+// imported for side-effect only
+import "@babylonjs/core/Helpers/sceneHelpers"
 
 import distortTexture from "../assets/textures/distortion.png";
 import rockTextureN from "../assets/textures/rockn.png";

webpack.prod.js

@@ -2,7 +2,6 @@ const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');
 
 const prodConfig = {
-    mode: "production",
-    devtool: "source-map"
+    mode: "production"
 };
 module.exports = merge(common, prodConfig);