Add webpack 4 example

CesiumGS · Jan 9, 2024 · afc288c · afc288c
1 parent 3347c43
commit afc288c
Show file tree

Hide file tree

Showing 7 changed files with 193 additions and 1 deletion.
diff --git a/webpack-4/package.json b/webpack-4/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "cesiumjs-webpack-example",
+  "version": "1.0.0",
+  "description": "The minimal recommended setup for an app using Cesium with Webpack.",
+  "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/"
+  },
+  "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"
+  },
+  "dependencies": {
+    "cesium": "^1.113.0"
+  }
+}
diff --git a/webpack-4/src/.eslintrc.json b/webpack-4/src/.eslintrc.json
@@ -0,0 +1,11 @@
+{
+  "root": true,
+  "extends": ["cesium/browser"],
+  "plugins": ["html", "es"],
+  "parserOptions": {
+    "ecmaVersion": 2023
+  },
+  "rules": {
+    "no-unused-vars": ["error", { "vars": "all", "args": "none" }]
+  }
+}
diff --git a/webpack-4/src/css/main.css b/webpack-4/src/css/main.css
@@ -0,0 +1,9 @@
+html,
+body,
+#cesiumContainer {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
diff --git a/webpack-4/src/index.html b/webpack-4/src/index.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <div id="cesiumContainer"></div>
+  </body>
+</html>
diff --git a/webpack-4/src/index.js b/webpack-4/src/index.js
@@ -0,0 +1,26 @@
+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),
+  },
+});
diff --git a/webpack-4/webpack.config.js b/webpack-4/webpack.config.js
@@ -0,0 +1,92 @@
+"use strict";
+
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+const path = require("path");
+const webpack = require("webpack");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+const cesiumSource = "node_modules/cesium/Build/Cesium";
+// this is the base url for static files that CesiumJS needs to load
+// Not required but if it's set remember to update CESIUM_BASE_URL as shown below
+const cesiumBaseUrl = "cesiumStatic";
+
+module.exports = {
+  entry: "./src/index.js",
+  output: {
+    filename: "app.js",
+    path: path.resolve(__dirname, "dist"),
+  },
+  // resolve: {
+  //   fallback: { https: false, zlib: false, http: false, url: false },
+  //   mainFiles: ["index", "Cesium"],
+  // },
+  module: {
+    unknownContextCritical: false,
+    rules: [
+      {
+        test: /\.(?:js|mjs|cjs)$/,
+        exclude: {
+          and: [/node_modules/], // Exclude libraries in node_modules ...
+          not: [/cesium/], // Except Cesium because it uses modern syntax
+        },
+        use: [
+          {
+            loader: "babel-loader",
+            options: {
+              presets: [["@babel/preset-env", { targets: "defaults, not ie 11" }]],
+              plugins: ["@babel/plugin-transform-optional-chaining"],
+            },
+          },
+          // Babel understands import.meta but Webpack doesn't
+          // can't find a way to tell babel not to output it so we need another loader
+          // that can understand it and translate into Webpack's representation
+          // https://www.npmjs.com/package/@open-wc/webpack-import-meta-loader
+          // TODO: but then we get static dependency errors about `require` in buildModuleUrl instead
+          require.resolve("@open-wc/webpack-import-meta-loader"),
+        ],
+      },
+      {
+        test: /\.css/,
+        use: ["style-loader", "css-loader"],
+      },
+      {
+        test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
+        use: ["file-loader"],
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: "./src/index.html",
+    }),
+    // Copy Cesium Assets, Widgets, and Workers to a static directory
+    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`,
+        },
+      ],
+    }),
+    new webpack.DefinePlugin({
+      // Define relative base path in cesium for loading assets
+      CESIUM_BASE_URL: JSON.stringify(cesiumBaseUrl),
+    }),
+  ],
+  devServer: {
+    static: "./dist",
+  },
+  mode: "development",
+};
diff --git a/webpack-5/package.json b/webpack-5/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": {