Cesium中文教程-Cesium and Webpack

最新推荐文章于 2024-09-06 22:50:30 发布

ND_DoYouService

最新推荐文章于 2024-09-06 22:50:30 发布

阅读量2.8k

点赞数

分类专栏： Cesium中文教程文章标签： Cesium中文教程

本文链接：https://blog.csdn.net/newston/article/details/118013407

版权

本教程介绍了如何使用Webpack构建一个基于Cesium的web应用程序。从创建基本的Webpack应用开始，逐步讲解如何配置Webpack以处理Cesium的静态文件和模块，实现代码分离和优化，最后展示了一个Hello World示例。

摘要由CSDN通过智能技术生成

前提条件(Prerequisites)

创建一个基本webpack应用(Create a basic webpack app)

使用npm初始化应用程序(Initialize an app with npm)

创建应用程序代码(Create our application code)

安装和配置webpack(Install and configure webpack)

打包应用程序(Bundle the app)

运行开发服务器(Run the development server)

向webpack应用程序添加Cesium(Add Cesium to a webpack app)

安装Cesium(Install Cesium)

webpack中配置Cesium

管理Cesium静态文件(Manage Cesium static files)

Require Cesium modules in our app

Requiring asset files

前提条件(Prerequisites)

基本了解命令行、JavaScript和web开发；
一个IDE或代码编辑器。Cesium开发团队人员使用Webstorm，但是最小化代码编辑器（例如Sublime Text）也可以工作；
Node.js安装，LTS版本是一个很好的起点，但是任何版本6或以上都可以工作。

创建一个基本webpack应用(Create a basic webpack app)

在第一部分，我们将描述如何使用webpack和开发服务器设置基本的web应用程序。如果你已经创建了一个web应用，只是想添加Cesium，可以跳到Add Cesium to a webpack app。

使用npm初始化应用程序(Initialize an app with npm)

为应用程序创建一个新的文件夹，让我们称为cesium-webpack-app。在当前目录下打开终端并运行一下命令：

npm init

按要求填写应用程序的描述。按回车键使用默认设置，所有的这些都适用于此应用程序。这将创建我们的package.json文件。

创建应用程序代码(Create our application code)

为我们的“source”创建一个src目录。这个目录将用于存放应用程序的代码，这些是我们需要编辑的文件。当创建的时候，webpack将在dist目录中生成输出或“distribution”文件。

在src下创建index.html文件，在文件中添加如下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>

现在需要为应用程序创建一个entry point。这将告诉webpack开始包含所有源代码和依赖项的地方。然后，这个包将被加载到我们的index.html文件中。

为了简单，创建一个新文件src/index.js，并向里添加一个快速行，这样我们就知道一切正常。

console.log('Hello World!');

安装和配置webpack(Install and configure webpack)

让我们从安装webpack开始。

npm install --save-dev webpack

Configuration

创建一个新的文件，叫webpack.config.js。在这里，我们将定义webpack配置（configuration）对象，之后将其传递给编辑器。

const path = require('path');  
  
const webpack = require('webpack');  
  
module.exports = {  
    context: __dirname,  
    entry: {  
        app: './src/index.js'  
    },  
    output: {  
        filename: '[name].js',  
        path: path.resolve(__dirname, 'dist'),  
    }  
};

首先，我们需要获取Node的路径，以及我们刚刚安装的webpac模块。在配置中，我们将告诉webpack基础路径内容是什么，并提供节点全局变量_dirname来指定该文件的位置。我们指定我们的entry到src/index.js，称为app。我们将告诉webpack输出打包文件（由于我们指定使用entry[name]，所以将命名为app.js）到dist文件夹。然后导出这个对象，使其可以在任何地方使用。

Loaders

我们还需要一种加载css文件和其它资产文件的方法。Webpack可以让我们像加载模块一样，加载任何东西，其使用loaders完成。我们将使用style-loader，css-loader和url-loader。

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

回到开始向webpack.config.js文件中添加module.rules。我们将添加两个规则，一个是为css文件，另一个是为其它静态文件。对于这两种方法，我们将定义一个test，用于测试我们希望用该加载器加载的文件类型，以及一个用于指定加载器列表的数组。

const path = require('path');  
  
const webpack = require('webpack');  
  
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' ]  
        }]  
    }  
};