cesium与webpack

使用npm初始化app

 npm init

创建程序代码

创建src/index.html并写入以下代码

<!DOCTYPE html>
<html>
  <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>Hello World!</title>
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>

创建src\index.js写入简单测试代码

console.log('输出成功');

安装webpack

npm install --save-dev webpack

添加各类loader

npm install --save-dev style-loader css-loader url-loader

为webpack添加 HtmlWebpackPlugin插件

  npm install --save-dev html-webpack-plugin

使用 webpack-dev-server

npm install --save-dev webpack-dev-server

在package.json中添加内容

···
"scripts": {
    "build": "node_modules/.bin/webpack --config webpack.config.js",
    "start": "node_modules/.bin/webpack-dev-server --config webpack.config.js --open"
  }
···

创建新文件webpack.config.js并写入以下代码

const path = require('path');

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    context: __dirname,
    entry: {
        app: './src/index.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
        }, {
            test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
            use: [ 'url-loader' ]
        }]
    },
    devServer: {
        contentBase: path.join(__dirname, "dist")
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
    ]
};

运行服务

npm start

把Cesium添加到程序中

安装cesium

npm install --save-dev cesium

管理cesium静态文件

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

在webpack.config.js中添加:

// The path to the Cesium source code
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';
const CopywebpackPlugin = require('copy-webpack-plugin');
···
···
    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'
    },
    resolve: {
        alias: {
            // Cesium module name
            cesium: path.resolve(__dirname, cesiumSource)
        }
    },
···
···
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),
        // Copy Cesium Assets, Widgets, and Workers to a static directory
        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({
            // Define relative base path in cesium for loading assets
            CESIUM_BASE_URL: JSON.stringify('')
        })
    ],

修改index.html文件中<body>标签中内容为

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

删除index.js原有内容并写入:

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

使用npm start命令启动，三维地球正常加载

去除白边，创建src/css/main.css,写入

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

在index.js中添加：

require('./css/main.css');

重新启动，白边消失

代码优化，原文中有，本文暂未涉及

cesium与webpack

使用npm初始化app

创建程序代码

安装webpack

把Cesium添加到程序中

推荐阅读更多精彩内容