使用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');
重新启动，白边消失
代码优化，原文中有，本文暂未涉及
