はじめに

今回はWebpackを使ってCesium.jsの環境を構築する手順について説明します。基本的には公式ドキュメントの内容をまとめたものですが、最新のWebpackに対応するためにいくつか変更点があります。
以下の説明では、あらかじめNode.jsがインストールされているものとします。

プロジェクト作成

とりあえずNode.jsのプロジェクトを作成します。

$ mkdir cesium_wp
$ cd cesium_wp
$ npm init --yes

プロジェクトを作成したら、必要なパッケージをインストールします。

$ npm install --save-dev webpack webpack-cli style-loader css-loader url-loader html-webpack-plugin webpack-dev-server copy-webpack-plugin
$ npm install --save-dev cesium

必要なファイルの作成、編集

以下に、プロジェクトに必要なファイルの作成と編集について説明します。

package.json

scriptsエントリに以下のようにコマンドを追加します。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    /* 以下の2行を追加 */
    "build": "webpack --config webpack.config.js",
    "start": "webpack-dev-server --config webpack.config.js --open"
  },

webpack.config.js

最もややこしいところです。詳細な説明は公式ドキュメントやWebpackのドキュメントを参照してください（ただし、公式ドキュメントは一部最新のWebpackに対応していません）。webpack.config.jsというファイルをプロジェクトのルートディレクトリに作成し、以下の内容を記述します。

const path = require('path');

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// Cesiumソースコードへのパスを変数に格納
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';
const CopywebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  context: __dirname,
  entry: {
    // 本記事ではエントリポイントはsrc/main.jsとする
    app: './src/main.js'
  },
  // dist以下にビルド結果を出力
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  amd: {
    // Webpack用に、require.toUrl()を無効化する
    toUrlUndefined: true
  },
  resolve: {
    alias: {
      cesium: path.resolve(__dirname, cesiumSource),
    },
    fallback: {
      // 以下のモジュールを無効にする
      fs: false,
      path: false,
      zlib: false
    }
  },
  module: {
    // cssと画像やjsonなどのファイルのローダーの処理を定義
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
        use: ['url-loader']
      },
      // ES6スタイルにする場合は以下のブロックを追加
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        type: 'javascript/auto',
        resolve: {
          fullySpecified: false
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),
    // 必要なCesiumのファイルを出力先にコピー
    new CopywebpackPlugin({
      patterns: [
        { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' },
        { from: path.join(cesiumSource, 'Assets'), to: 'Assets' },
        { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }
      ]
    }),
    new webpack.DefinePlugin({
      // 静的ファイルをロードするためのベースURLを環境変数で指定
      CESIUM_BASE_URL: JSON.stringify('')
    })
  ],
  // とりあえず開発モード
  mode: "development",
  // webpack-dev-serverが静的ファイルを配信するディレクトリを指定
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist')
    }
  }
};

ソースファイルを作成

ここではsrcというディレクトリを作成して、その中にmain.js、index.html、style.cssという3つのファイルを作るものとします。
以下に、各ファイルの記述内容を示します。

index.html

とくに注意するところはありませんが、コンテナのIDはこのあとのmain.jsで使用するものに合わせてください。

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Cesium WP</title>
</head>

<body>
  <div id="cesiumContainer"></div>
</body>

</html>

style.css

こちらもとくに注意するところはありません。

html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

main.js

ES6スタイルの場合のコードの例を示します。

import * as Cesium from 'cesium/Cesium';
import './style.css';
import 'cesium/Widgets/widgets.css';

async function initializeCesium() {
  // この関数内にSandcastleのコードを貼り付ける
  const viewer = new Cesium.Viewer('cesiumContainer', {
    terrain: Cesium.Terrain.fromWorldTerrain(),
  });
  viewer.scene.globe.depthTestAgainstTerrain = true;
}

initializeCesium();

実行、ビルド

以上で準備完了です。以下のコマンドで実行してみましょう。

$ npm start

問題がなければブラウザが起動し、以下のように表示されれば成功です。

また、ビルドを行うには以下のコマンドを実行します。

$ npm run build

上記のwebpack.config.jsで指定したとおり、distというディレクトリが作成され、ファイル一式が作成されます。