webpack 介紹

本質(zhì)上，webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時(shí)，它會(huì)遞歸地構(gòu)建一個(gè)依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè) bundle。

如圖所示，webpack 可以將各種格式的文件或者依賴模塊，打包成瀏覽器兼容的js，css，圖片等。比如我們可以用CSS預(yù)處理語(yǔ)言 SASS 來(lái)寫樣式，通過(guò)配置 webpack 打包成轉(zhuǎn)譯為原生 CSS的方式，使用 ES6 代替原生JavaScript開發(fā)，通過(guò)webpack打包成原生js。我們使用 SASS 和 ES6 的目的都是因?yàn)橄矚g他們精簡(jiǎn)的寫法和好用的新特性。

關(guān)于webpack的詳細(xì)使用教程，見 webpack中文網(wǎng)站

ES6 + webpack 開發(fā) WebGIS 環(huán)境配置

（1）package.json 文件創(chuàng)建和介紹

接下來(lái)我們搭建基于webpack 的前端開發(fā)環(huán)境，新建一個(gè)工程目錄為08webpack-demo，工程根目錄下運(yùn)行 npm init（命令行 cd 到這個(gè)工程路徑后，再執(zhí)行 npm init），即可初始化生產(chǎn)一個(gè)package.json 文件，復(fù)制下邊的代碼覆蓋：

大致介紹package.json中主要屬性的含義：

·name 項(xiàng)目名稱

·version 項(xiàng)目版本號(hào)

·description 項(xiàng)目描述

·main 主入口文件

·scripts 腳本命令配置，這里配置了可以使用npm run xxx的方式執(zhí)行對(duì)于配置命令

·license 軟件協(xié)議

·devDependencies 工程開發(fā)環(huán)境依賴模塊module，開發(fā)時(shí)才需要，比如webpack\babel等開發(fā)環(huán)境打包編譯用的

·dependencies 工程依賴模塊module，比如lodash,jquery等這種項(xiàng)目依賴的JS庫(kù)

一般一個(gè)前端工程項(xiàng)目中所用到的所有技術(shù)點(diǎn)，都會(huì)包含在package.json文件中（類似Java用Maven管理的時(shí)候工程下的pom.xml），如果不是，那就是這個(gè)工程做的不規(guī)范，不專業(yè)。所以我們?cè)贕ithub 上看任何開源倉(cāng)庫(kù)、demo，可以優(yōu)先看package.json文件，就可以大致了解其技術(shù)點(diǎn)?？梢詫?duì)比大型項(xiàng)目openlayers/package.json看一下。

（2）安裝依賴，新建webpack配置文件

有了package.json文件后，我們可以使用 npm install（可以縮寫為npm i）執(zhí)行來(lái)安裝依賴的module，也就是devDependencies和 dependencies 下指定的所有module都會(huì)自動(dòng)下載到項(xiàng)目根目錄下的node_modules下。（如果需要提交到git倉(cāng)庫(kù)，建議創(chuàng)建.gitignore文件，忽略掉node_modules文件夾）

安裝完成依賴后，根目錄新建 webpack.config.js 文件，粘貼以下代碼：

配置中加入了相應(yīng)的注釋，某些部分不理解，自己修改，然后運(yùn)行一下看不同的效果即可體會(huì)，或者到webpack中文網(wǎng)站詳細(xì)了解相關(guān)配置項(xiàng)功能再進(jìn)行配置一遍。

（3）webpack作為環(huán)境運(yùn)行 Demo

為了快速演示webpack環(huán)境效果，復(fù)制第6章節(jié)中的臺(tái)風(fēng)路徑demo到本demo目錄下

第6章節(jié)中的臺(tái)風(fēng)路徑demo文件

然后執(zhí)行npm run start 命令（本質(zhì)上運(yùn)行package.json文件中配置的node_modules/.bin/webpack-dev-server --config webpack.config.js）

npm run start

運(yùn)行成功后，打開 localhost:8080 即可看到效果了。demo就可以拋起來(lái)了，隨意修改代碼文件后，會(huì)自動(dòng)執(zhí)行打包，刷新瀏覽器即可看到效果。（插件可以實(shí)現(xiàn)熱更新，感興趣可以去了解一下）

（4）打包構(gòu)建

webpack可以打包代碼，一般建議打包和開發(fā)的配置文件是不一樣的。開發(fā)環(huán)境注重調(diào)試發(fā)布，打包上線的代碼建議壓縮混淆，代碼文件大小也小一些。（可以用uglifyjs-webpack-plugin插件來(lái)混淆壓縮腳本）

新建webpack.release.config.js文件，復(fù)制以下代碼：

然后執(zhí)行 npm run build 即可打包demo的代碼了，打包代碼輸出目錄配置的是dist。

需要部署的時(shí)候，用dist目錄下的文件部署即可，結(jié)果壓縮混淆的。

（5）ES6模塊語(yǔ)法支持

以上4個(gè)步驟介紹了 webpack 配置開發(fā)和打包環(huán)境的步驟，僅支持的是原生js寫代碼，如果你不用ES6寫前端，以上4個(gè)步驟就結(jié)束了。下面介紹配置加入支持ES6，就使用ES6模塊語(yǔ)法開發(fā)。

通過(guò)Babel可以將ES6編譯為ES5，下邊介紹在webpack配置文件中配置babel，首先下載依賴：

然后再在webpack配置文件中的module插件模塊中加入一個(gè)loaders加載器：

這樣支持了ES6模塊語(yǔ)法了。所有的js文件，都可以使用ES6特性去開發(fā)，上線的時(shí)候構(gòu)建打包后自動(dòng)會(huì)編譯為原生js。

以上的配置完成后，demo提供給別人，使用說(shuō)明就是這么寫了（是不是很常見）：

·安裝依賴：npm install

·啟動(dòng)：npm run start

（本章demo源碼下載后也是這么運(yùn)行哦?。?/p>

本章小結(jié)

本章主要介紹如何搭建 Webpack + ES6 的開發(fā)環(huán)境，然后可以基于webpack去開發(fā)和打包代碼，也不需要用 http-server來(lái)部署預(yù)覽demo，直接webpack啟動(dòng)邊開發(fā)邊預(yù)覽即可?？梢宰约哼x擇 webpack + 原生js 的方式開發(fā)，也可以用 webpack + ES6 的方式開發(fā)。建議ES6，本章demo演示的配置文件可以下載源碼查看。

demo源碼：gis616（備注源碼）

（持續(xù)更新中......）