Cesium官方教程13--Cesium和Webpack

原文地址：https://cesiumjs.org/tutorials/cesium-and-webpack/
Cesium 和 Webpack
Webpack是非常强大非常流行的JavaScript 模块打包工具。它可以让开发人员以一种简单直观的 require 方式去加载各种页面需要的文件，极大的方便了开源人员对代码和资源文件进行结构化设计。当编译的时候，它会跟踪代码依赖性，把所有的模型打包到浏览器可以直接加载的一个或者多个bundles中。
在这个教程的前一半，我们创建一个简单的web项目，学会使用webpack，然后再去集成 Cesium npm模块。这是基于Cesium开发正式web项目的很好开端，但是它不是学习Cesium的最简单示例，可以看一下我们的新手入门。
在教程的后半部分，我们将讨论更多高级的webpack 配置参数，去优化使用Cesium的项目。
这个优化Cesium和Webpack集成的项目示例，可以查看官网webpack示例 代码库。
先决条件

对命令行，JavaScript语言和web开发需要有一个基本了解。
一个代码编辑器（IDE)。Cesium团队的开发人员都用 Webstorm, 但是 Sublime Text 等工具也可以。
安装了Node.js 。LTS版本最好，但是只要是v6以上都可以的。

创建一个基本的 webpack 程序
第一部分，描述如何建立一个简本的webpack程序以及一个开发测试服务器。如果你已经创建了程序，就想添加Cesium，直接看后面和Cesium继承部分。
使用npm初始化程序
创建一个程序目录，命名为cesium-webpack-app。打开控制台，定位到该目录下，运行下面的命令：

根据提示信息，填写你的项目里的详细信息。一路按enter使用默认配置也是可以的。完成后，这个目录下创建了一个 package.json文件。
编写自己的程序代码
在这个目录下，创建一个源码目录src。这个目录是我们项目源码所在位置，我们编辑的文件都放这下面。当我们编译后，webpack会自动生成编译后文件放在 dist目录下。

我们创建一个 src/index.html文件，用一个HTML页面的模板。

现在我们需要添加我们程序的入口 。这个入口会告诉webpack去把所有依赖的源码文件打包。打包后的文件才会在 index.html文件里引用。
现在，为了简单，我们新建 src/index.js文件，只添加下面这句确认环境配置好了。

安装和配置webpack
下来我们安装webpack。


webpack
安装配置参数
创建一个名为webpack.config.js的文件。这是定义webpack的配置参数 的地方，它会传给webpack的编译器。

首先，我们需要从Nodejs中加载 path和我们刚刚安装的webpack模块。我们告诉webpack，context的及处理路径是Node的全局变量__dirname，这个全局变量指的这个文件所在的目录位置。我们设定了我们的程序入口是 src/index.js，而且把它命名为app。我们还告诉webpack把打包后的文件（这个文件的名称叫app.js，因为我们设置了程序入口的[name]）输出到dist目录下。最后export 把这个配置对象导出，其他文件才能用到这个配置。

加载器（Loaders）

我们还需要加载我们的css以及其他资源文件的方法。webpack允许我们像加载js模块一样，载入这些文件。我们需要使用 loaders。我们需要使用 style-loader, css-loader, 和 url-loader。