以下部分为cesium官方文档翻译，文档地址 cesium安装官方文档

增加CesiumJS到一个webpack app中

安装CesiumJS

从npm安装cesium模块，并添加到package.json中

  1. npm install --save-dev cesium

在webpack中配置CesiumJS

CesiumJS是一个一个庞大且复杂的库。除了JavaScript模块之外，它也包含一些像CSS,image和json文件等静态资源。它包含一些web开发者文件(web worker files)在单线程内执行密集运算。由于使用库的方式多种多样，CesiumJS没有定义入口点，这点上CesiumJS和传统的npm模块不同。我们在webpack里面使用它时，需要进行一些额外配置一些选项。
首先要定义CesiumJS的位置，本教程使用源代码，因此webpack可以包含单个模块并跟踪依赖。或者你可以使用CesiumJS的built版(已压缩或未压缩版)，但是这些模块已经合并和压缩，灵活性更小。
在webpack.config.js头部增加：

  1. // The path to the CesiumJS source code
  2. // CesiumJS源代码路径
  3. const cesiumSource = 'node_modules/cesium/Source';
  4. const cesiumWorkers = '../Build/Cesium/Workers';

增加如下选项到配置文件中，用来处理webpack如何编译CesiumJS的一些怪癖。

  1. output: {
  2.       filename: '[name].js',
  3.     path: path.resolve(__dirname, 'dist'),
  4.     // Needed to compile multiline strings in Cesium
  5.     sourcePrefix: ''
  6. },
  7.  amd: {
  8.     // Enable webpack-friendly use of require in Cesium
  9.     toUrlUndefined: true
  10. },
  11. node: {
  12.     // Resolve node module use of fs
  13.     fs: 'empty'
  14. },

output.sourcePrefix: '',覆盖webpack的默认设置，即在每行之前添加\t制表符。CesiumJS有一些多行字符串，因此需要使用空前缀来覆盖此默认值。 amd.toUrlUndefined: true告诉CesiumJS，用于评估require语句的AMD Webpack版本与标准的toUrl函数不兼容。 node.fs: 'empty'解决了fs模块的某些第三方用法，该模块旨在在Node环境中而非浏览器中使用。

增加cesium别名，以便在代码中引用

  1. resolve: {
  2.   alias: {
  3.     // CesiumJS module name
  4.     cesium: path.resolve(__dirname, cesiumSource)
  5.   }
  6. },

管理CesiumJS静态文件

最后，确保静态CesiumJS资产，widget和Web worker file已正确提供和加载。在构建过程中，使用copy-webpack-plugin将静态文件复制到dist目录。

  1. npm install --save-dev copy-webpack-plugin

在webpack.config.js顶部引用

  1. const CopywebpackPlugin = require('copy-webpack-plugin');

增加插件如下插件

  1. plugins: [
  2.   new HtmlWebpackPlugin({
  3.     template: 'src/index.html'
  4.   }),
  5.   // Copy Cesium Assets, Widgets, and Workers to a static directory
  6.   new CopywebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]),
  7.   new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]),
  8.   new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ])
  9. ],

添加后可以复制Assets和Widgets目录以及构建的Web Worker脚本。
定义一个环境变量，该变量告诉CesiumJS使用webpack DefinePlugin加载静态文件的基本URL。plugins数组将如下所示：

  1. plugins: [
  2.   new HtmlWebpackPlugin({
  3.     template: 'src/index.html'
  4.   }),
  5.   // Copy Cesium Assets, Widgets, and Workers to a static directory
  6.   new CopywebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]),
  7.   new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]),
  8.   new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ]),
  9.   new webpack.DefinePlugin({
  10.     // Define relative base path in cesium for loading assets
  11.     CESIUM_BASE_URL: JSON.stringify('')
  12.   })
  13. ],

引入CesiumJS 模块到项目中

我们可以通过几种方法在我们的应用程序中要求CesiumJS模块。您可以使用CommonJS语法或ES6 import语句。您可以导入整个CesiumJS库，也可以只需要所需的特定模块。包含模块将导致webpack仅编译包中的那些模块及其依赖性，而不编译整个库。

CommonJS style require

全体引入

  1. var Cesium = require('cesium/Cesium');
  2. var viewer = new Cesium.Viewer('cesiumContainer');

按需引入

  1. var Color = require('cesium/Core/Color');
  2. var color = Color.fromRandom();

ES6 style import

全体引入

  1. import Cesium from 'cesium/Cesium';
  2. var viewer = new Cesium.Viewer('cesiumContainer');

按需引入

  1. import Color from 'cesium/core/Color';
  2. var color = Color.fromRandom();

Requiring asset files

webpack的基本原理是将每个文件都视为一个模块。这使得导入asset与包括JavaScript一样。我们告诉webpack如何使用加载器加载配置文件中的每种类型的文件，因此我们只需要调用require即可。

  1. require('cesium/Widgets/widgets.css');

Hello world!

创建一个新文件， src/css/main.css ，为项目添加样式

  1. html, body, #cesiumContainer {
  2.     width: 100%;
  3.     height: 100%;
  4.     margin: 0;
  5.     padding: 0;
  6.     overflow: hidden;
  7. }

在index.html中给CesiumJS Viewer 创建一个div

  1. <div id="cesiumContainer"></div>

创建viewer

  1. var viewer = new Cesium.Viewer('cesiumContainer');

运行 npm start 在浏览器中查看Viewer
在webpack中使用cesium - 图1

高级Webpack配置

可以通过多种方式利用webpack提高性能表现，降低打包尺寸并执行其他复杂构建步骤，在这里，我们将讨论一些与使用CesiumJS库有关的配置选项。

我们可以在webpack.release.config.js的示例存储库中找到最佳生产Cesium Webpack构建的配置。

代码拆分

默认情况下，webpack将CesiumJS与我们的应用程序打包在同一个chunk中，这回导致打包出来的文件很大。我们可以将CesiumJS拆分成自己的bundle，并使用CommonChunksPlugin改善我们的应用程序性能。如果最终在项目中创建了多个chunk，它们都可以引用一个公共的cesium chunk。
将插件添加到webpack.config.js文件中，并指定用于分解CesiumJS模块的规则：

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

启用source map

开启source map后，webpack可以将错误追踪到原始内容。他们提供或多或少的详细调试信息，以换取编译速度。我们建议使用’eval’选项。

  1. devtool: 'eval'

source map不推荐使用在生产环境中。

移除警告

CesiumJS源代码中存在开发人员错误和警告，这些错误和警告已从我们的压缩版中删除。由于没有内置的Webpack方式可以删除这些警告，因此我们将使用strip-pragma-loader。

  1. npm install strip-pragma-loader --save-dev

将加载程序包含在module.rules中，并将debug设置为false：

  1. rules: [{
  2.   // Strip cesium pragmas
  3.   test: /\.js$/,
  4.   enforce: 'pre',
  5.   include: path.resolve(__dirname, cesiumSource),
  6.   use: [{
  7.     loader: 'strip-pragma-loader',
  8.     options: {
  9.       pragmas: {
  10.         debug: false
  11.       }
  12.     }
  13.   }]
  14. }]

压缩和最小化

统一和最小化代码可在生产中减小文件大小，对于发布版本，CesiumJS会最小化JavaScript文件并减少CSS文件。使用 uglifyjs-webpack-plugin 来压缩CesiumJS资源。

  1. npm install uglifyjs-webpack-plugin --save-dev

在配置文件中引用

  1. const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

添加到插件列表中

  1. plugins: [
  2.   new webpack.optimize.UglifyJsPlugin()
  3. ]

使用css-loader上的最小化选项来最小化CSS。

  1. module: {
  2.   rules: [{
  3.     test: /\.css$/,
  4.     use: [
  5.       'style-loader',
  6.       {
  7.         loader: 'css-loader',
  8.         options: {
  9.           // minify loaded css
  10.           minimize: true
  11.         }
  12.       }
  13.     ]
  14.   }]
  15. }

资源列表