Webpack 4 example

.eslintignore

@@ -1 +1 @@
-dist/**
+*/dist/**

.github/workflows/lint.yml

@@ -0,0 +1,18 @@
+name: lint
+on: push
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    name: Lint/Format check
+    steps:
+      - uses: actions/checkout@v3
+      - name: install node 20
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+      - name: install
+        run: npm install
+      - name: lint *.js
+        run: npm run eslint
+      - name: format code
+        run: npm run prettier-check

.github/workflows/main.yml

@@ -6,7 +6,11 @@ jobs:
     strategy:
       matrix:
         node: [18, 20]
-    name: Node ${{ matrix.node }}
+        webpack-dir: [webpack-4, webpack-5]
+    name: Node ${{ matrix.node }} - ${{ matrix.webpack-dir }}
+    defaults:
+      run:
+        working-directory: ${{ matrix.webpack-dir }}
     steps:
       - uses: actions/checkout@v3
       - name: install node ${{ matrix.node }}
@@ -15,9 +19,5 @@ jobs:
           node-version: ${{ matrix.node }}
       - name: install
         run: npm install
-      - name: lint *.js
-        run: npm run eslint
-      - name: format code
-        run: npm run prettier-check
       - name: build
         run: npm run build

.gitignore

@@ -1,5 +1,5 @@
-/dist/
-/node_modules/
+dist/
+node_modules/
 package-lock.json
 .DS_Store
 .eslintcache

.prettierignore

@@ -5,8 +5,10 @@
 # Unignore directories (to all depths) and unignore code and style files in these directories
 !.github/**/
 !.vscode/**/
-!src/**/
 !doc/**/
+!webpack-4/**/
+!webpack-5/**/
+!src/**/
 
 !**/*.js
 !**/*.css

.prettierrc

@@ -1 +1 @@
-{}
+{}

README.md

@@ -2,24 +2,38 @@
 
 A minimal recommended setup for an applications using [Cesium](https://cesium.com) with [Webpack](https://webpack.js.org/concepts/).
 
-[![Build Status](https://travis-ci.org/CesiumGS/cesium-webpack-example.svg?branch=using-custom-loader)](https://travis-ci.org/CesiumGS/cesium-webpack-example)
+Jump to the [Webpack 5](./webpack-5/) directory for the most up to date example. We also provide a [Webpack 4](./webpack-4/) example if you are still on the older version.
 
 ## Running this application
 
 ```sh
+# switch to the corresponding webpack-4 or webpack-5 directory
 npm install
 npm start
+# for the built version
+npm run build
+npm run start:built
 ```
 
 Navigate to `localhost:8080`.
 
 ### Available scripts
 
-- `npm start` - Runs a webpack build with `webpack.config.js` and starts a development server
-- `npm run build` - Runs a webpack build with `webpack.config.js`
+The top level scripts in the root directory are mostly for development onf this repo itself:
+
+- `npm run eslint`, `npm run prettier`, `npm run prettier-check` - Lint this project to maintain code style
+
+There are also some shortcuts to run the code for each Webpack version. These are just for convenience and behave the same as changing to the sub-directories and running the commands there as shown above.
+
+- `npm run start-4` - Run the Webpack 4 example
+- `npm run build-4` - Build the Webpack 4 example
+- `npm run start-5` - Run the Webpack 5 example
+- `npm run build-5` - Build the Webpack 5 example
 
 ## Requiring Cesium in your application
 
+Regardless which version of Webpack you're using yous should be able to use CesiumJS in the same way.
+
 We recommend [importing named exports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) from the Cesium ES module, via the `import` keyword. This allows webpack to [tree shake](https://webpack.js.org/guides/tree-shaking/) your application automatically.
 
 ### Import named modules from Cesium
@@ -37,7 +51,20 @@ import "cesium/Build/Cesium/Widgets/widgets.css";
 
 ## Cesium sub-packages
 
-CesiumJS requires a few static files to be hosted on your server, like web workers and SVG icons. This example is set up to copy these directories already if you install the whole `cesium` package. However if you only install `@cesium/engine` then you should change the paths in `webpack.config.js` to the ones below:
+CesiumJS requires a few static files to be hosted on your server, like web workers and SVG icons. These examples are set up to copy these directories already if you install the whole `cesium` package.
+
+```js
+new CopyWebpackPlugin({
+  patterns: [
+    { from: path.join(cesiumSource, "Workers"), to: `${cesiumBaseUrl}/Workers`, },
+    { from: path.join(cesiumSource, "ThirdParty"), to: `${cesiumBaseUrl}/ThirdParty`, },
+    { from: path.join(cesiumSource, "Assets"), to: `${cesiumBaseUrl}/Assets`, },
+    { from: path.join(cesiumSource, "Widgets"), to: `${cesiumBaseUrl}/Widgets`, },
+  ],
+}),
+```
+
+However if you only install `@cesium/engine` then you should change the paths in `webpack.config.js` to the ones below:
 
 ```js
 new CopyWebpackPlugin({
@@ -85,6 +112,10 @@ rules: [
 
 Pull requests are appreciated. Please use the same [Contributor License Agreement (CLA)](https://github.com/CesiumGS/cesium/blob/master/CONTRIBUTING.md) used for [Cesium](https://cesium.com/).
 
+Even though this project has nested package.json projects we are not using `npm` workspaces to preserve a more "stand-alone" nature for each example. This allows other developers to copy the sub-directory and use it as-is for a new project.
+
+Make sure you run `npm install` in the root directory to set up linting and git commit hooks
+
 ---
 
 Developed by the Cesium team.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cesiumjs-webpack-example",
   "version": "1.0.0",
-  "description": "The minimal recomended setup for an app using Cesium with Webpack.",
+  "description": "The minimal recommended setup for an app using Cesium with Webpack.",
   "homepage": "https://cesium.com/platform/cesiumjs/",
   "license": "Apache-2.0",
   "author": {
@@ -18,33 +18,27 @@
     "type": "git",
     "url": "https://github.com/CesiumGS/cesium-webpack-example.git"
   },
-  "main": "index.js",
   "scripts": {
-    "build": "webpack --config webpack.config.js",
-    "start": "webpack serve --config webpack.config.js",
-    "start:built": "npx http-server -a localhost -p 8080 dist/",
+    "prepare": "husky install",
+    "postinstall": "cd webpack-4 && npm install && cd ../webpack-5 && npm install",
     "eslint": "eslint \"./**/*.js\" \"./**/*.html\" --cache --quiet",
     "prettier": "prettier --write --no-config \"**/*\"",
-    "prettier-check": "prettier --check --no-config \"**/*\""
+    "prettier-check": "prettier --check --no-config \"**/*\"",
+    "start-4": "cd webpack-4 && npm run start",
+    "build-4": "cd webpack-4 && npm run build",
+    "start-5": "cd webpack-5 && npm run start",
+    "build-5": "cd webpack-5 && npm run build"
   },
   "devDependencies": {
-    "cesium": "^1.113.0",
-    "copy-webpack-plugin": "^9.1.0",
-    "css-loader": "^6.8.1",
     "eslint": "^8.56.0",
     "eslint-config-cesium": "^10.0.2",
     "eslint-plugin-es": "^4.1.0",
     "eslint-plugin-html": "^7.1.0",
-    "html-webpack-plugin": "^5.6.0",
     "husky": "^8.0.3",
-    "prettier": "^3.1.1",
-    "style-loader": "^3.3.3",
-    "webpack": "^5.89.0",
-    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.15.1"
+    "prettier": "^3.1.1"
   },
   "lint-staged": {
-    "*.{js,cjs,html}": [
+    "*.{js,html}": [
       "eslint --cache --quiet",
       "prettier --write --no-config"
     ]

webpack-4/README.md

@@ -0,0 +1,105 @@
+# cesium-webpack-example
+
+A minimal recommended setup for an applications using [Cesium](https://cesium.com) with [Webpack 4](https://v4.webpack.js.org/concepts/).
+
+## Running this application
+
+```sh
+npm install
+npm start
+# for the built version
+npm run build
+npm run start:built
+```
+
+Navigate to `localhost:8080`.
+
+### Available scripts
+
+- `npm start` - Runs a webpack build with `webpack.config.js` and starts a development server at `localhost:8080`
+- `npm run build` - Runs a webpack build with `webpack.config.js`
+- `npm run start:built` - Start a small static server using `http-server` to demonstrate hosting the built version
+
+## Requiring Cesium in your application
+
+We recommend [importing named exports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) from the Cesium ES module, via the `import` keyword. This allows webpack to [tree shake](https://webpack.js.org/guides/tree-shaking/) your application automatically.
+
+### Import named modules from Cesium
+
+```js
+import { Color } from "cesium";
+var c = Color.fromRandom();
+```
+
+### Import Cesium static asset files
+
+```js
+import "cesium/Build/Cesium/Widgets/widgets.css";
+```
+
+## Cesium sub-packages
+
+CesiumJS requires a few static files to be hosted on your server, like web workers and SVG icons. This example is set up to copy these directories already if you install the whole `cesium` package.
+
+```js
+new CopyWebpackPlugin({
+  patterns: [
+    { from: path.join(cesiumSource, "Workers"), to: `${cesiumBaseUrl}/Workers`, },
+    { from: path.join(cesiumSource, "ThirdParty"), to: `${cesiumBaseUrl}/ThirdParty`, },
+    { from: path.join(cesiumSource, "Assets"), to: `${cesiumBaseUrl}/Assets`, },
+    { from: path.join(cesiumSource, "Widgets"), to: `${cesiumBaseUrl}/Widgets`, },
+  ],
+}),
+```
+
+However if you only install `@cesium/engine` then you should change the paths in `webpack.config.js` to the ones below:
+
+```js
+new CopyWebpackPlugin({
+  patterns: [
+    { from: 'node_modules/@cesium/engine/Build/Workers', to: `${cesiumBaseUrl}/Workers` },
+    { from: 'node_modules/@cesium/engine/Build/ThirdParty', to: `${cesiumBaseUrl}/ThirdParty` },
+    { from: 'node_modules/@cesium/engine/Source/Assets', to: `${cesiumBaseUrl}/Assets` },
+  ],
+}),
+```
+
+## Removing pragmas
+
+To remove pragmas such as a traditional Cesium release build, use the [`strip-pragma-loader`](https://www.npmjs.com/package/strip-pragma-loader).
+
+Install the plugin with npm,
+
+```sh
+npm install strip-pragma-loader --save-dev
+```
+
+and include the loader in `module.rules` with `debug` set to `false`.
+
+```js
+rules: [
+  {
+    test: /\.js$/,
+    enforce: "pre",
+    include: path.resolve(__dirname, cesiumSource),
+    use: [
+      {
+        loader: "strip-pragma-loader",
+        options: {
+          pragmas: {
+            debug: false,
+          },
+        },
+      },
+    ],
+  },
+];
+```
+
+## Contributions
+
+Pull requests are appreciated. Please use the same [Contributor License Agreement (CLA)](https://github.com/CesiumGS/cesium/blob/master/CONTRIBUTING.md) used for [Cesium](https://cesium.com/).
+
+---
+
+Developed by the Cesium team.

webpack-4/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "cesiumjs-webpack-4-example",
+  "version": "1.0.0",
+  "description": "The minimal recommended setup for an app using Cesium with Webpack 4",
+  "homepage": "https://cesium.com/platform/cesiumjs/",
+  "license": "Apache-2.0",
+  "author": {
+    "name": "Cesium GS, Inc.",
+    "url": "https://cesium.com"
+  },
+  "keywords": [
+    "cesium",
+    "CesiumJS",
+    "webpack",
+    "example"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/CesiumGS/cesium-webpack-example.git"
+  },
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack --config webpack.config.js",
+    "start": "webpack serve --config webpack.config.js",
+    "start:built": "npx http-server -a localhost -p 8080 dist/"
+  },
+  "dependencies": {
+    "cesium": "^1.113.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.7",
+    "@babel/plugin-transform-optional-chaining": "^7.23.4",
+    "@babel/preset-env": "^7.23.7",
+    "@open-wc/webpack-import-meta-loader": "^0.4.7",
+    "babel-loader": "^8.3.0",
+    "copy-webpack-plugin": "^6.4.1",
+    "css-loader": "^5.2.7",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^4.5.2",
+    "style-loader": "^2.0.0",
+    "webpack": "^4.47.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.15.1"
+  }
+}

webpack-4/src/index.js

@@ -0,0 +1,32 @@
+import {
+  Viewer,
+  Cartesian3,
+  Math,
+  Terrain,
+  createOsmBuildingsAsync,
+} from "cesium";
+import "cesium/Build/Cesium/Widgets/widgets.css";
+import "./css/main.css";
+
+// CesiumJS has a default access token built in but it's not meant for active use.
+// please set your own access token can be found at: https://cesium.com/ion/tokens.
+// Ion.defaultAccessToken = "YOUR TOKEN HERE";
+
+// Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
+const viewer = new Viewer("cesiumContainer", {
+  terrain: Terrain.fromWorldTerrain(),
+});
+
+// Add Cesium OSM Buildings, a global 3D buildings layer.
+createOsmBuildingsAsync().then((buildingTileset) => {
+  viewer.scene.primitives.add(buildingTileset);
+});
+
+// Fly the camera to San Francisco at the given longitude, latitude, and height.
+viewer.camera.flyTo({
+  destination: Cartesian3.fromDegrees(-122.4175, 37.655, 400),
+  orientation: {
+    heading: Math.toRadians(0.0),
+    pitch: Math.toRadians(-15.0),
+  },
+});