cesium-webpack 入门开发系列一初探篇（附源码下载）

前言

cesium-webpack 入门开发系列环境知识点了解：

• node 安装包下载
  webpack 打包管理工具需要依赖 node 环境，所以 node 安装包必须安装，上面链接是官网下载地址
• webpack 配置介绍文档
  详细的 webpack 文档配置介绍，适合新手查看，我也是边看边学
  
• vscode 安装包下载，我这边用 vscode工具编译开发前端项目，个人觉的这款工具还不错
• cesium api文档介绍，详细介绍 cesium 每个类的函数以及属性等等
• cesium 在线例子

我之前写一系列关于 cesium 入门开发文章，均是采取页面引用 cesium.js 以及 css 传统的手段来开发。其实 cesium 官网早已推出 CesiumJS and webpack 形式，我一直没抽空来尝试，所以，今天抽空按照官网的教程搭建一套 cesium-webpack形式来开发。

• 参照 cesium 的教程如下：
  CesiumJS and webpack
• cesium-webpack-example github例子地址如下：
  cesium-webpack-example

按照官网教程安装配置过程中，有几处地方需要注意一下，由于 npm install 安装都是默认最新版本的，所以官网教程有些地方不太合适，版本差异性，具体如下：

• webpack.config.js 配置文件里面的 webpack.optimize.CommonsChunkPlugin 识别不到

plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'cesium',
minChunks: module => module.context && module.context.indexOf('cesium') !== -1
})
],

改为

plugins: [
 
new webpack.optimize.SplitChunksPlugin({
name: 'cesium',
minChunks: module => module.context && module.context.indexOf('cesium') !== -1
})
],

• webpack.config.js 配置文件里面的 new webpack.optimize.UglifyJsPlugin() 已经被弃用

plugins: [
new webpack.optimize.UglifyJsPlugin()
]

改为

optimization: {
minimize: true
}

创建好的cesium-webpack 目录，vscode 打开如下：

dist webpack 打包编译后的文件夹
dist/index.html 地图主页
src/index.js 地图初始化代码
package.json 记录了项目的配置信息，包括名称、版本、许可证等元数据，也会记录所需的各种模块，包括 执行依赖，和开发依赖
webpack.config.js webpack 的配置文件

• 地图页面 index.html

content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

• 地图初始化加载 index.js

import Cesium from 'cesium/Cesium';
import "./css/main.css";
import "cesium/Widgets/widgets.css";
 
var viewer = new Cesium.Viewer('cesiumContainer');

• 在 vscode 新建终端，输入 npm install 或者 npm i, 安装环境需要的依赖包，若无报错信息，则进行下一步
• npm run build，打包编译web项目
• npm start，node 启动 web 项目打包到浏览器运行看效果
• 如果正常出现该页面，则运行成功
  

完整demo源码见小专栏文章尾部：GIS之家cesium小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波