Cesium Webpack 示例项目教程
1. 项目的目录结构及介绍
cesium-webpack-example/
├── dist/
├── node_modules/
├── src/
│ └── index.js
├── webpack.config.js
├── package.json
└── README.md
dist/
: 打包后的文件存放目录。node_modules/
: 项目依赖的模块存放目录。src/
: 源代码目录,包含项目的入口文件index.js
。webpack.config.js
: Webpack 配置文件。package.json
: 项目依赖和脚本配置文件。README.md
: 项目说明文档。
2. 项目的启动文件介绍
项目的启动文件位于 src/index.js
。这个文件是 Webpack 打包的入口点,负责初始化和配置 Cesium 的相关设置。
// src/index.js
import { Viewer } from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";
const viewer = new Viewer("cesiumContainer");
3. 项目的配置文件介绍
项目的配置文件是 webpack.config.js
,它包含了 Webpack 的配置信息,用于打包和优化项目。
// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';
module.exports = {
mode: 'development',
context: __dirname,
entry: {
app: './src/index.js'
},
resolve: {
alias: {
// CesiumJS module name
cesium: path.resolve(__dirname, cesiumSource)
}
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
// Needed to compile multiline strings in Cesium
sourcePrefix: ''
},
amd: {
// Enable webpack-friendly use of require in Cesium
toUrlUndefined: true
},
node: {
// Resolve node module use of fs
fs: 'empty'
},
module: {
rules: [{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}]
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new webpack.DefinePlugin({
// Define relative base path in cesium for loading assets
CESIUM_BASE_URL: JSON.stringify('')
})
]
};
这个配置文件定义了入口文件、输出目录、模块解析规则、插件等,确保 Cesium 能够正确地集成和运行。