Resium
Home
Installation
InstallationSet up webpack config 1Set up webpack config 21. Install webpack plugins and loaders2. Define Cesium path3. Add aliases4. Add copy-webpack-plugin5. Add definition of CESIUM_BASE_URL6. Add loaders and load CSS file in the entry JS7. Remove extra code in production buildReady!
Getting StartedGuide
Components
ExamplesAdvancedMigration GuideContribution

Set up webpack config 2

Copy only asset files and load Cesium partially.

In this way, imported and used Cesium's source codes are bundled to your app's source code with webpack.

See also: example project and Cesium's official example

1. Install webpack plugins and loaders

npm install --save-dev copy-webpack-plugin css-loader style-loader url-loader strip-pragma-loader

or

yarn add --dev copy-webpack-plugin css-loader style-loader url-loader strip-pragma-loader

Then, edit your webpack configuration.

2. Define Cesium path

const cesiumSource = "node_modules/cesium/Source";
const cesiumWorkers = "../Build/Cesium/Workers";

Note: if you changed context in webpack config, you may have to change cesiumSource also to indicate node_modules path exactly. e.g. if context is path.join(__dirname, "src"), cesiumSource may be ../node_modules/cesium/Source.

3. Add aliases

Be careful in order. Reversing them does not work.

{
resolve: {
alias: {
cesium$: 'cesium/Cesium',
cesium: 'cesium/Source'
}
}
}

4. Add copy-webpack-plugin

Copy only asset files at build time.

const CopyWebpackPlugin = require("copy-webpack-plugin");
{
plugins: [
new CopyWebpackPlugin([
{
from: path.join(cesiumSource, cesiumWorkers),
to: "Workers",
},
{
from: path.join(cesiumSource, "Assets"),
to: "Assets",
},
{
from: path.join(cesiumSource, "Widgets"),
to: "Widgets",
},
]),
];
}

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(""),
}),
];
}

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

6. Add loaders and load CSS file in the entry JS

{
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: "babel-loader",
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
use: ["url-loader"],
}
]
}
}

In your entry JS (e.g. index.js):

import "cesium/Widgets/widgets.css";

7. Remove extra code in production build

This is optional, but it is recommended for production build.

module.exports = (env, argv) => {
const prod = argv.mode === "production";
return {
// ...
module: {
rules: [
// ...
...[
prod
? {
// Strip cesium pragmas
test: /\.js$/,
enforce: "pre",
include: path.resolve(__dirname, cesiumSource),
use: [
{
loader: "strip-pragma-loader",
options: {
pragmas: {
debug: false,
},
},
},
],
}
: {},
]
}
}
}

Ready!

Everything is ready! Advance to Getting Started.

You can import Cesium directly:

import { Cartesian3 } from "cesium";

Note: import Cesium from "cesium"; may be cause an error, as default is not exported from Cesium.