Resium
Home
Installation
InstallationSet up webpack config 11. Install webpack plugins2. Add cesium to externals3. Add copy-webpack-plugin4. Add html-webpack-plugin and html-webpack-include-assets-plugin5. Add definition of CESIUM_BASE_URLReady!Set up webpack config 2
Getting StartedGuide
Components
ExamplesAdvancedMigration GuideContribution

Set up webpack config 1

Copy whole Cesium files and load Cesium in HTML.

See also: example project

1. Install webpack plugins

npm install --save-dev copy-webpack-plugin html-webpack-plugin html-webpack-include-assets-plugin

or

yarn add copy-webpack-plugin html-webpack-plugin html-webpack-include-assets-plugin

Then, edit your webpack configuration.

2. Add cesium to externals

Cesium will be loaded in HTML. Notify it to webpack.

{
externals: {
cesium: "Cesium"
}
}

When cesium is loaded, webpack uses window.Cesium instead of loading source files.

3. Add copy-webpack-plugin

Copy whole Cesium files at build time.

const CopyWebpackPlugin = require("copy-webpack-plugin");
{
plugins: [
new CopyWebpackPlugin([
{
from: "node_modules/cesium/Build/Cesium",
to: "cesium",
},
]),
]
}

node_modules/cesium/Build/Cesium is already minified. If you want to debug, use unminified version: node_modules/cesium/Build/CesiumUnminified.

The recommended way is to load the minified version in prodcution mode, and the unminified version in development mode.

module.exports = (env, argv) => {
const prod = argv.mode === "production";
return {
// ...
plugins: [
// ...
new CopyWebpackPlugin([
{
from: `node_modules/cesium/Build/Cesium${prod ? "" : "Unminified"}`,
to: "cesium",
},
]),
new HtmlWebpackIncludeAssetsPlugin({
append: false,
assets: ["cesium/Widgets/widgets.css", "cesium/Cesium.js"],
})
]
}
}

4. Add html-webpack-plugin and html-webpack-include-assets-plugin

Load Cesium js and css files in HTML.

const HtmlWebpackPlugin = require("html-webpack-plugin");
const HtmlWebpackIncludeAssetsPlugin = require("html-webpack-include-assets-plugin");
{
plugins: [
// ...
new HtmlWebpackPlugin(),
new HtmlWebpackIncludeAssetsPlugin({
append: false,
assets: ["cesium/Widgets/widgets.css", "cesium/Cesium.js"],
})
]
}

5. Add definition of CESIUM_BASE_URL

Cesium refers to CESIUM_BASE_URL to find asset files.

const webpack = require("webpack");
{
plugins: [
new webpack.DefinePlugin({
CESIUM_BASE_URL: JSON.stringify("/cesium"),
}),
]
}

Note: If publicPath in webpack config is changed, CESIUM_BASE_URL may have to be changed also.

Ready!

Everything is ready! Advance to Getting Started.

You can import Cesium directly:

import { Cartesian3 } from "cesium";