cesium-webpack-plugin
v1.1.0
Published
CesiumJS plugin for webpack
Maintainers
sonisourabhReadme
cesium-webpack-plugin
Let's use 🌍Cesium with webpack today! Resium is also recommended.
Very very easy usage
1. Install modules
npm install --save-dev cesium-webpack-plugin
npm install --save cesium resium
# or
yarn add -D cesium-webpack-plugin
yarn add cesium resium2. Add plugin to webpack.config.js
const CesiumWebpackPlugin = require("cesium-webpack-plugin");
module.exports = {
// ...
plugins: [
// ...
new CesiumWebpackPlugin(),
],
};3. Congratulations
Set up is complete! Enjoy your Cesium life.
You can import Cesium as following:
import { Viewer, Entity, Color } from "cesium";If you are using Resium, you can import Cesium and Resium as following.
import { Color } from "cesium";
import { Viewer, Entity } from "resium";Options
If the option is omitted, the default options is used:
new CesiumWebpackPlugin({
loadPartially: false,
loadCSSinHTML: true,
cesiumPath: "cesium",
});loadPartially
If false, whole Cesium will be loaded in HTML and window.Cesium is used in import { ... } from "cesium";. This is the easiest way.
Otherwise, Cesium will be load partially and bundled in the JS. You have to install strip-pragma-loader to build Cesium for production: npm i -D strip-pragma-loader.
For more details, refer to Cesium official tutorial.
loadCSSinHTML
If true, Widgets/widgets.css in Cesium is loaded in HTML.
Otherwise, you have to load the CSS once manually as following.
If loadPartially is true:
import "cesium/Widgets/widgets.css";Otherwise:
import "cesium/Build/CesiumUnminified/Widgets/widgets.css";cesiumPath
Directory path destination to copy Cesium files. Also used as the URL prefix
for CESIUM_BASE_URL and any injected tag src.
outputPath
Absolute filesystem directory to copy assets into, overriding the default
(relative to webpack's output.path). Only needed when output.path isn't
the actual served static root — see the Next.js section below.
Next.js (App Router)
There's no index.html for webpack to inject tags into and no global
window.Cesium script — Next.js bundles cesium like any other dependency
instead, and only files under public/ are served as static assets. This
plugin detects the missing html-webpack-plugin and adapts automatically:
it skips tag injection/externals and just bundles cesium normally.
next.config.js:
const path = require("path");
const CesiumWebpackPlugin = require("cesium-webpack-plugin");
module.exports = {
webpack(config) {
config.plugins.push(
new CesiumWebpackPlugin({
cesiumPath: "/cesium",
outputPath: path.join(__dirname, "public", "cesium"),
})
);
return config;
},
};Import the widgets CSS once yourself (there's no HTML <head> to inject it
into):
import "cesium/Build/Cesium/Widgets/widgets.css";CESIUM_BASE_URL is set via DefinePlugin, which only takes effect for code
webpack actually bundles from cesium's ES source (its package.json
module/exports fields already point there on modern Cesium versions —
no resolve.alias needed). Client components that import cesium before
this runs should still work: the free CESIUM_BASE_URL identifier is
compiled in at build time, not read at runtime.