Merge pull request #52 from CesiumGS/webpack-5-update

update webpack dependencies and config
CesiumGS · Jan 5, 2024 · f5ecccb · f5ecccb
2 parents 3461f74 + c4c3be8
commit f5ecccb
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -35,6 +35,20 @@ var c = Color.fromRandom();
 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:
+
+```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).

diff --git a/package.json b/package.json
@@ -21,27 +21,27 @@
   "main": "index.js",
   "scripts": {
     "build": "webpack --config webpack.config.js",
-    "start": "webpack serve --config webpack.config.js --open",
+    "start": "webpack serve --config webpack.config.js",
+    "start:built": "npx http-server -a localhost -p 8080 dist/",
     "eslint": "eslint \"./**/*.js\" \"./**/*.html\" --cache --quiet",
     "prettier": "prettier --write --no-config \"**/*\"",
     "prettier-check": "prettier --check --no-config \"**/*\""
   },
   "devDependencies": {
     "cesium": "^1.113.0",
-    "copy-webpack-plugin": "^9.0.1",
-    "css-loader": "^6.2.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.3.2",
+    "html-webpack-plugin": "^5.6.0",
     "husky": "^8.0.3",
     "prettier": "^3.1.1",
-    "style-loader": "^3.2.1",
-    "url-loader": "^4.1.1",
-    "webpack": "^5.51.1",
-    "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.3.1"
+    "style-loader": "^3.3.3",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.15.1"
   },
   "lint-staged": {
     "*.{js,cjs,html}": [

diff --git a/webpack.config.js b/webpack.config.js
@@ -1,13 +1,16 @@
 "use strict";
 
 // The path to the CesiumJS source code
-const cesiumSource = "node_modules/cesium/Source";
-const cesiumWorkers = "../Build/Cesium/Workers";
 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 = {
   context: __dirname,
   entry: {
@@ -30,7 +33,7 @@ module.exports = {
       },
       {
         test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
-        use: ["url-loader"],
+        type: "asset/inline",
       },
     ],
   },
@@ -41,15 +44,27 @@ module.exports = {
     // Copy Cesium Assets, Widgets, and Workers to a static directory
     new CopyWebpackPlugin({
       patterns: [
-        { from: path.join(cesiumSource, cesiumWorkers), to: "Workers" },
-        { from: path.join(cesiumSource, "Assets"), to: "Assets" },
-        { from: path.join(cesiumSource, "Widgets"), to: "Widgets" },
-        { from: path.join(cesiumSource, "ThirdParty"), to: "ThirdParty" },
+        {
+          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(""),
+      CESIUM_BASE_URL: JSON.stringify(cesiumBaseUrl),
     }),
   ],
   mode: "development",