diff --git a/README.md b/README.md index f2a6d20..abc2e05 100644 --- 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 index ca488c6..f015420 100644 --- 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 index 05555e9..d8ac689 100644 --- 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",