Cesium Webpack 示例项目教程

Cesium Webpack 示例项目教程

cesium-webpack-exampleThe minimal recommended setup for an application using Cesium with Webpack.项目地址:https://gitcode.com/gh_mirrors/ces/cesium-webpack-example

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 能够正确地集成和运行。

cesium-webpack-exampleThe minimal recommended setup for an application using Cesium with Webpack.项目地址:https://gitcode.com/gh_mirrors/ces/cesium-webpack-example