webpack4 里集成 Cesium

条件

nodejs >=6.0
webpack 4.0

安装Cesium

npm install cesium --save

webpack中配置Cesium

在webpack.config.js,我们增加如下配置

// Cesium源码所在目录
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';

接着再增加一些配置项，为了解决使用webpack编译Cesium的一些问题。

output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
        //需要编译Cesium中的多行字符串 
        sourcePrefix: ''
    },
    amd: {
        //允许Cesium兼容 webpack的require方式 
        toUrlUndefined: true
    },
    node: {
        // 解决fs模块的问题（Resolve node module use of fs）
        fs: 'empty'
    },

解释

output.sourcePrefix:''因为某些版本的webpack默认会在输出的每一行的开始增加一个\t字符。Cesium有很多多行字符串，所以我们需要使用空字符串 ''来覆盖这个选项。
amd.toUrlUndefined: true 告诉Cesium，webpack中计算 require声明的AMD 模块里的toUrl 函数和标准的不兼容。
node.fs: 'empty' 解决一些第三方库使用的fs 模块，它一般是用在NodeJS的环境里，而不能在浏览器环境里使用。
下来我们增加一个 cesium 别名（alias） ，我们就很容易的在项目里引用，就像一个传统的Node 模块。

resolve: {
  alias: {
    // Cesium模块名称
    cesium: path.resolve(__dirname, cesiumSource)
  }
},

管理Cesium静态文件

最后，我们确认一下Cesium的静态资源，控件，web worker文件能被服务正确加载。
我们使用 copy-webpack-plugin，它能在编译阶段，把Cesium里静态文件整个拷贝到 dist 目录下，确保我们的服务能访问它。首先，安装它。

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

在webpack.config.js 中引入

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

在plugins目录下增加下述配:

plugins: [
  new HtmlWebpackPlugin({
    template: 'src/index.html'
  }),
  // 拷贝Cesium 资源、控价、web worker到静态目录 
  new CopywebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]),
  new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]),
  new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ])
],

我们直接拷贝了Assets和Widgets目录。也拷贝了编译好的 web worker脚本，他们已经使用 RequireJS optimizer编译和优化过了。因为web woker设计就是运行在他们自己的线程里，所以他们可以直接载入和运行。web worker很少需要调试他们原来的代码。所以直接整个从 Build/Cesium/Workers目录拷贝过去。
如果你用的GitHub库的源码，那么这个Build目录不存在。确认你定位到了Cesium的根目录下，然后运行 npm run release去编译输出。更多信息可以查看Cesium编译指导。
最后，我们使用DefinePlugin 定义了一个环境变量，这个告诉Cesium加载静态文件的URL根路径，并把它编译到webpack里去。最后plugins 的配置数组应该是这样的：

plugins: [
  new HtmlWebpackPlugin({
    template: 'src/index.html'
  }), 
  new CopywebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]),
  new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]),
  new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ]),
  new webpack.DefinePlugin({
    //Cesium载入静态的资源的相对路径
    CESIUM_BASE_URL: JSON.stringify('')
  })
],

在项目中引用

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

完成！