webpack 介绍

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

如图所示，webpack 可以将各种格式的文件或者依赖模块，打包成浏览器兼容的js，css，图片等。比如我们可以用CSS预处理语言 SASS 来写样式，通过配置 webpack 打包成转译为原生 CSS的方式，使用 ES6 代替原生JavaScript开发，通过webpack打包成原生js。我们使用 SASS 和 ES6 的目的都是因为喜欢他们精简的写法和好用的新特性。

关于webpack的详细使用教程，见 webpack中文网站

ES6 + webpack 开发 WebGIS 环境配置

（1）package.json 文件创建和介绍

接下来我们搭建基于webpack 的前端开发环境，新建一个工程目录为08webpack-demo，工程根目录下运行 npm init（命令行 cd 到这个工程路径后，再执行 npm init），即可初始化生产一个package.json 文件，复制下边的代码覆盖：

大致介绍package.json中主要属性的含义：

·name 项目名称

·version 项目版本号

·description 项目描述

·main 主入口文件

·scripts 脚本命令配置，这里配置了可以使用npm run xxx的方式执行对于配置命令

·license 软件协议

·devDependencies 工程开发环境依赖模块module，开发时才需要，比如webpack\babel等开发环境打包编译用的

·dependencies 工程依赖模块module，比如lodash,jquery等这种项目依赖的JS库

一般一个前端工程项目中所用到的所有技术点，都会包含在package.json文件中（类似Java用Maven管理的时候工程下的pom.xml），如果不是，那就是这个工程做的不规范，不专业。所以我们在Github 上看任何开源仓库、demo，可以优先看package.json文件，就可以大致了解其技术点。可以对比大型项目openlayers/package.json看一下。

（2）安装依赖，新建webpack配置文件

有了package.json文件后，我们可以使用 npm install（可以缩写为npm i）执行来安装依赖的module，也就是devDependencies和 dependencies 下指定的所有module都会自动下载到项目根目录下的node_modules下。（如果需要提交到git仓库，建议创建.gitignore文件，忽略掉node_modules文件夹）

安装完成依赖后，根目录新建 webpack.config.js 文件，粘贴以下代码：

配置中加入了相应的注释，某些部分不理解，自己修改，然后运行一下看不同的效果即可体会，或者到webpack中文网站详细了解相关配置项功能再进行配置一遍。

（3）webpack作为环境运行 Demo

为了快速演示webpack环境效果，复制第6章节中的台风路径demo到本demo目录下

第6章节中的台风路径demo文件

然后执行npm run start 命令（本质上运行package.json文件中配置的node_modules/.bin/webpack-dev-server --config webpack.config.js）

npm run start

运行成功后，打开 localhost:8080 即可看到效果了。demo就可以抛起来了，随意修改代码文件后，会自动执行打包，刷新浏览器即可看到效果。（插件可以实现热更新，感兴趣可以去了解一下）

（4）打包构建

webpack可以打包代码，一般建议打包和开发的配置文件是不一样的。开发环境注重调试发布，打包上线的代码建议压缩混淆，代码文件大小也小一些。（可以用uglifyjs-webpack-plugin插件来混淆压缩脚本）

新建webpack.release.config.js文件，复制以下代码：

然后执行 npm run build 即可打包demo的代码了，打包代码输出目录配置的是dist。

需要部署的时候，用dist目录下的文件部署即可，结果压缩混淆的。

（5）ES6模块语法支持

以上4个步骤介绍了 webpack 配置开发和打包环境的步骤，仅支持的是原生js写代码，如果你不用ES6写前端，以上4个步骤就结束了。下面介绍配置加入支持ES6，就使用ES6模块语法开发。

通过Babel可以将ES6编译为ES5，下边介绍在webpack配置文件中配置babel，首先下载依赖：

然后再在webpack配置文件中的module插件模块中加入一个loaders加载器：

这样支持了ES6模块语法了。所有的js文件，都可以使用ES6特性去开发，上线的时候构建打包后自动会编译为原生js。

以上的配置完成后，demo提供给别人，使用说明就是这么写了（是不是很常见）：

·安装依赖：npm install

·启动：npm run start

（本章demo源码下载后也是这么运行哦！）

本章小结

本章主要介绍如何搭建 Webpack + ES6 的开发环境，然后可以基于webpack去开发和打包代码，也不需要用 http-server来部署预览demo，直接webpack启动边开发边预览即可。可以自己选择 webpack + 原生js 的方式开发，也可以用 webpack + ES6 的方式开发。建议ES6，本章demo演示的配置文件可以下载源码查看。

demo源码：gis616（备注源码）

（持续更新中......）