C0——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:                        發行項目需要的證書

接下來的事情請查看：https://www.jianshu.com/p/85917bcc023f

很複雜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

跟着博主一起學習吧我將帶你開發下面這個額！