{"id":19500196,"url":"https://github.com/cesiumgs/cesium-webpack-example","last_synced_at":"2025-04-12T18:53:42.495Z","repository":{"id":44638299,"uuid":"105555080","full_name":"CesiumGS/cesium-webpack-example","owner":"CesiumGS","description":"The minimal recommended setup for an application using Cesium with Webpack.","archived":false,"fork":false,"pushed_at":"2024-05-02T20:52:41.000Z","size":3609,"stargazers_count":263,"open_issues_count":14,"forks_count":161,"subscribers_count":20,"default_branch":"main","last_synced_at":"2025-04-03T21:14:34.548Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CesiumGS.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-02T16:04:23.000Z","updated_at":"2025-03-21T02:46:59.000Z","dependencies_parsed_at":"2024-01-11T23:42:23.799Z","dependency_job_id":"aead20c5-ffc4-4086-98f9-4c40fcc0b09b","html_url":"https://github.com/CesiumGS/cesium-webpack-example","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CesiumGS%2Fcesium-webpack-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CesiumGS%2Fcesium-webpack-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CesiumGS%2Fcesium-webpack-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CesiumGS%2Fcesium-webpack-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CesiumGS","download_url":"https://codeload.github.com/CesiumGS/cesium-webpack-example/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248618262,"owners_count":21134200,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-10T22:07:52.460Z","updated_at":"2025-04-12T18:53:42.466Z","avatar_url":"https://github.com/CesiumGS.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# cesium-webpack-example\n\nA minimal recommended setup for an applications using [Cesium](https://cesium.com) with [Webpack](https://webpack.js.org/).\n\nJump 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.\n\n## Running this application\n\nPlease switch to the corresponding sub-directory for the version of Webpack you're using to see how to run this example application\n\n- [Webpack 4 commands](./webpack-4/README.md#running-this-application)\n- [Webpack 5 commands](./webpack-5/README.md#running-this-application)\n\n## Requiring Cesium in your application\n\nRegardless which version of Webpack you're using you should be able to use CesiumJS in the same way.\n\nWe 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.\n\n### Import named modules from Cesium\n\n```js\nimport { Color } from \"cesium\";\nvar c = Color.fromRandom();\n```\n\n### Import Cesium static asset files\n\n```js\nimport \"cesium/Build/Cesium/Widgets/widgets.css\";\n```\n\n## Cesium sub-packages\n\nCesiumJS 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.\n\n```js\nnew CopyWebpackPlugin({\n  patterns: [\n    { from: path.join(cesiumSource, \"Workers\"), to: `${cesiumBaseUrl}/Workers`, },\n    { from: path.join(cesiumSource, \"ThirdParty\"), to: `${cesiumBaseUrl}/ThirdParty`, },\n    { from: path.join(cesiumSource, \"Assets\"), to: `${cesiumBaseUrl}/Assets`, },\n    { from: path.join(cesiumSource, \"Widgets\"), to: `${cesiumBaseUrl}/Widgets`, },\n  ],\n}),\n```\n\nHowever if you only install `@cesium/engine` then you should change the paths in `webpack.config.js` to the ones below:\n\n```js\nnew CopyWebpackPlugin({\n  patterns: [\n    { from: 'node_modules/@cesium/engine/Build/Workers', to: `${cesiumBaseUrl}/Workers` },\n    { from: 'node_modules/@cesium/engine/Build/ThirdParty', to: `${cesiumBaseUrl}/ThirdParty` },\n    { from: 'node_modules/@cesium/engine/Source/Assets', to: `${cesiumBaseUrl}/Assets` },\n  ],\n}),\n```\n\nAdditionally you will have to import a different widgets css file in `src/index.js`.\n\n```js\n// Change this import\nimport \"cesium/Build/Cesium/Widgets/widgets.css\";\n\n// To this one from the cesium/engine package\nimport \"@cesium/engine/Source/Widget/CesiumWidget.css\";\n```\n\n## Removing pragmas\n\nTo remove pragmas such as a traditional Cesium release build, use the [`strip-pragma-loader`](https://www.npmjs.com/package/strip-pragma-loader).\n\nInstall the plugin with npm,\n\n```sh\nnpm install strip-pragma-loader --save-dev\n```\n\nand include the loader in `module.rules` with `debug` set to `false`.\n\n```js\nrules: [\n  {\n    test: /\\.js$/,\n    enforce: \"pre\",\n    include: path.resolve(__dirname, cesiumSource),\n    use: [\n      {\n        loader: \"strip-pragma-loader\",\n        options: {\n          pragmas: {\n            debug: false,\n          },\n        },\n      },\n    ],\n  },\n];\n```\n\n## Contributions\n\nPull 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/).\n\nEven 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.\n\nMake sure you run `npm install` in the root directory to set up linting and git commit hooks\n\n### Available scripts\n\nThe top level scripts in the root directory are mostly for development of this repo itself:\n\n- `npm run eslint`, `npm run prettier`, `npm run prettier-check` - Lint this project to maintain code style\n\nThere 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\n\n- `npm run start-4` - Run the Webpack 4 example\n- `npm run build-4` - Build the Webpack 4 example\n- `npm run start-5` - Run the Webpack 5 example\n- `npm run build-5` - Build the Webpack 5 example\n\n---\n\nDeveloped by the Cesium team.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcesiumgs%2Fcesium-webpack-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcesiumgs%2Fcesium-webpack-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcesiumgs%2Fcesium-webpack-example/lists"}