C1——node+webpack搭建cesium网站

编辑器vscode里运行“npm init“ 按提示录入，最终为我们创建package.json文件

package name:                     你的项目名字叫啥
version:                          版本号
description:                      对项目的描述
entry point:                      项目的入口文件（一般用哪个js文件作为node服务，就填写那个文件）
test command:                     项目启动的时候要用什么命令来执行脚本文件（默认为node app.js）
git repository:                  将项目上传到git中
keywirds：                       项目关键字
author:                         作者的名字
license:                        发行项目需要的证书

接下来的事情请查看：Cesium官方教程13--Cesium和Webpack - 简书

很复杂git+https://github.com/838325182/cesium1.67.git直接放git（超多注释带你飞）

webpack.config.js文件：

const CopywebpackPlugin = require('copy-webpack-plugin')//它能在编译阶段，把Cesium里静态文件整个拷贝到 dist 目录下，确保我们的服务能访问它
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");//该插件能创建web应用程序

// Cesium源码所在目录 ***2cesiumWorkers的路径相对cesiumSource来的
const cesiumSource = './src/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'
module.exports = {
    context: __dirname,//告诉webpack，context的及处理路径,也就是Node的全局变量__dirname
    entry: {           
        app: './src/app.js' //入口文件并命名为app
    },
    output: {
        filename: '[name].js',//告诉webpack将app.js输出到硬盘文件夹，并导出该对象。这样就能在其他地方使用
        path: path.resolve(__dirname, 'dist'),
        sourcePrefix: ''//因为某些版本的webpack默认会在输出的每一行的开始增加一个\t 字符。Cesium有很多多行字符串，所以我们需要使用空字符串 ''来覆盖这个选项。
    },
    //首先，我们需要从Nodejs中加载 path和我们刚刚安装的webpack模块。我
    // 们告诉webpack，context的及处理路径是Node的全局变量__dirname，这个全局变量指的这个文件所在的目录位置。
    // 我们设定了我们的程序入口是 src/index.js，而且把它命名为app。
    // 我们还告诉webpack把打包后的文件（这个文件的名称叫app.js，因为我们设置了程序入口的[name]）输出到dist目录下。
    // 最后export 把这个配置对象导出，其他文件才能用到这个配置。


    amd: {
        toUrlUndefined: true//允许Cesium兼容 webpack的require方式 
    },
    node: {
        fs: 'empty'// ****3解决一些第三方库使用的fs 模块，它一般是用在NodeJS的环境里，而不能在浏览器环境里使用。
    },
    resolve: {
        alias: {
            cesium: path.resolve(__dirname, cesiumSource)//增加一个cesium 别名（alias）,就很容易的在项目里引用
        }
    },
    module: { // 加载器
        unknownContextCritical : false,
        rules: [{
            test: /\.css$/, //装载器指定想加载的文件类型
            use: [ 'style-loader', 'css-loader' ] //指定装载器列表用来解析文件。***1cesium样式文件不能解析解决办法是在主页面@import url(widgets.css的url);
        },{
            test: /\.(png|git|jpeg|svg|xml|json)$/,
            use: [ 'url-loader' ]
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({ //把 src/index.html 做为一个template设置，webpack就会自动在这个页面注入一个我们的打包文件的引用。
            template: 'src/index.html'
        }),
        //  用copy-webpack-plugin'拷贝Cesium 资源、控建、web worker到静态目录 
        // 直接拷贝了Assets和Widgets目录。
        // 从 Build/Cesium/Workers目录拷贝(已经使用 RequireJS optimizer编译和优化过了的Workers文件夹）过去
        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_BASE_URL: JSON.stringify('')
        }),
    ],
    devServer : {//指定端口和ip
        contentBase: path.join(__dirname,"dist"),//告诉开发服务器在dist文件夹下提供我们的文件这和上面配置的output输出文件相同的
        port:8999,
        host:'0.0.0.0', //所有ip可访问否则只能本机
        overlay:{
            errors:true, //编译过程中如果有任何错误，都会显示到页面上
        },
        open:true,// 自动帮你打开浏览器
        hot:true
    }
};


//package.json文件定义一些脚本供调用
// "scripts": {
//     "build": "node_modules/.bin/webpack --config webpack.config.js",
//      //这句的意思是执行命令 “npm build” 将调用webpack 命令，并把我们刚才新建的配置文件webpack.config.js 当作参数传递过去。
//      //并且会在dist文件夹下生成app.js h和index.html。这些文件已经是可以使用的程序了并负责对外提供服务
//      //我们需要告诉服务器去哪里寻找文件。这个需要和我们的webpack输出目录一致，也就是 dist目录。所以在 webpack.config.js文件中增加devServer的“contentBase”配置。
//     "start": "node_modules/.bin/webpack-dev-server --config webpack.config.js --open",
//      // --open标记能打开浏览器
//     "server": "node_modules/.bin/webpack-dev-server --config webpack.config.js --open"
//   },

package.json文件：

{
  "name": "cesium1.67",
  "version": "1.0.0",
  "description": " tezhanbing's Cesium sdk",
  "main": "app.js",
  "scripts": {
    "build": "node_modules/.bin/webpack --config webpack.config.js",
    "start": "node_modules/.bin/webpack-dev-server --config webpack.config.js --open",
    "server": "node_modules/.bin/webpack-dev-server --config webpack.config.js --open"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/838325182/cesium1.67.git"
  },
  "author": "teZhanBing",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/838325182/cesium1.67/issues"
  },
  "homepage": "https://github.com/838325182/cesium1.67#readme",
  "devDependencies": {
    "copy-webpack-plugin": "^5.1.1",
    "css-loader": "^3.5.2",
    "html-webpack-plugin": "^4.2.0",
    "style-loader": "^1.1.4",
    "url-loader": "^4.1.0",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "jquery": "^3.3.1",
    "jsdom": "^11.6.2",
    "mysql": "^2.18.1"
  }
}

引用Cesium

引用Cesium整个库:

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

引用某个Cesium库:

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

引入样式文件：******如果失败了加载html里用@import url(widgets.css的url);导入   这点很重要

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

至此就可以在src目录下的app.js和index.html里开发我们的网站了。

这篇文章是我在cesiumlab的博文看到然后一字一字敲出来的。中间有四五个地方需要注意，都***标记了。希望不要管我copy

跟着博主一起学习吧我将带你开发下面这个额！

自己找教程手撸的现在应该不会这样搞了。