1.安裝npm
? ?不管你想使用grunt，還是gulp，還是webpack，你都要用到npm，相信大家都對(duì)此不陌生了，npm是什么東東呢？npm其實(shí)是Node.js的包管理工具（package manager），因?yàn)槲覀兪褂酶鞣N框架會(huì)依賴(lài)需要多js代碼包，而如果需要就到網(wǎng)上搜索下載解壓在使用，會(huì)非常非常繁瑣麻煩，所以npm就應(yīng)運(yùn)而生了，它是一個(gè)集中管理的工具，大家都會(huì)把自己開(kāi)的模塊打包后上傳到npm官網(wǎng)，如果要使用直接通過(guò)npm下載安裝即可。
? ?那么我們?cè)趺窗惭bnpm，其實(shí)我們?cè)诎惭bnode.js的時(shí)候npm就已經(jīng)安裝好了，所以我們要先安裝node.js，安裝完畢后我們就可以在命令行中輸入npm -v，來(lái)查看npm版本。（命令行工具我在mac下使用的是iTerm2，windows可以安裝git bash）
2.什么是webpack
什么是webpack，它有什么優(yōu)點(diǎn)？
如果你有過(guò)gulp或grunt的使用經(jīng)驗(yàn)，就不難理解webpack是個(gè)什么東東，webpack是一個(gè)前端工具，可以讓各個(gè)模塊進(jìn)行加載、預(yù)處理，再進(jìn)行打包，它有g(shù)ulp和grunt的大部分基本功能，它的最大區(qū)別就是提供了模塊化解決方案，可以把各種資源作為模塊來(lái)使用和處理。
webpack的優(yōu)點(diǎn)如下：
1. webpack 遵循commonJS 的形式，但對(duì) AMD/CMD 的支持也很全面，方便舊項(xiàng)目進(jìn)行代碼遷移。
2. 能被模塊化的不僅僅是 JS ，所有的靜態(tài)資源，例如css，圖片等都能模塊化，即以require的方式引入。
3. 開(kāi)發(fā)便捷，能替代部分 grunt/gulp 的工作，比如打包、壓縮混淆、圖片轉(zhuǎn)base64等。
有一點(diǎn)注意的就是webpack的思路是把我們所有的require資源都整合集成到一個(gè)js文件中，我們通常命名為bundle.js
3.安裝和配置webpack
接下來(lái)我們就開(kāi)始一步一步的安裝使用webpack。（以下以mac為例）
我們先創(chuàng)建項(xiàng)目目錄結(jié)構(gòu)，根目錄是webpack-demo，結(jié)構(gòu)如下：（源碼下載在文末）
app文件夾下放置我們的開(kāi)發(fā)文件，比如 index.scss文件和主邏輯main.js文件，以及作為模塊文件的module1.js，將來(lái)main.js和module1.js都會(huì)整合到public目錄下的bundle.js中，我們的index.html直接引用bundle.js即可。public目錄就是瀏覽器執(zhí)行需要的文件，包括index.html、將來(lái)index.sass生成的index.css和bundle.js。webpack.config.js是webpack的配置文件，稍后會(huì)詳細(xì)說(shuō)明。
原材料準(zhǔn)備好了，接下來(lái)我們就開(kāi)始正式安裝webpack了。
1.我們首先要在根目錄下生成package.json文件，它會(huì)顯示以后我們通過(guò)npm安裝的各種依賴(lài)包，我們通過(guò)終端進(jìn)入根目錄，執(zhí)行：npm init
然后終端會(huì)讓我們輸入一堆信息，隨便寫(xiě)即可。最后輸入yes確認(rèn)，會(huì)發(fā)現(xiàn)我們的根目錄下自動(dòng)生成了一個(gè)package.json文件
內(nèi)容就是一堆json數(shù)據(jù)，基本就是我們剛才在終端里輸入的信息，大致如下：
package.json生成好了我們先放一放。
2.接下來(lái)通過(guò)全局安裝webpack
在終端執(zhí)行cd -- 退回到全局，然后執(zhí)行：（sudo） npm install -g webpack，mac下報(bào)錯(cuò)的話(huà)前面可能需要加sudo獲取管理員權(quán)限（下同）。
這樣就安裝好了webpack，可以再全局通過(guò)webpack -v來(lái)查看是否安裝成功。
3.然后我們進(jìn)入項(xiàng)目根目錄局部安裝webpack，進(jìn)入./webpack-demo，執(zhí)行：npm install webpack --save-dev
如果看到了這一頁(yè)說(shuō)明局部安裝webpack成功了。此時(shí)根目錄下會(huì)出現(xiàn)一個(gè)node_modules文件夾。
以后我們?cè)诟夸浵峦ㄟ^(guò)npm安裝的各種依賴(lài)包都會(huì)默認(rèn)安裝到這個(gè)文件夾下面。
現(xiàn)在我們項(xiàng)目的webpack框架就準(zhǔn)備好了，接下來(lái)我們要使用它來(lái)處理各種東西了，拿最常見(jiàn)的css預(yù)處理來(lái)說(shuō)吧，我個(gè)人常用sass，那么怎么用webpack來(lái)處理sass為我們所用呢，現(xiàn)在就來(lái)說(shuō)說(shuō)loader加載器。
4. loader加載器。
webpack是通過(guò)loader加載器來(lái)管理使用各種插件和工具的，比如我們要使用sass，就要通過(guò)npm安裝sass-loader加載器，然后在之前提到的 webpack.config.js文件中進(jìn)行配置使用，我們要是使用es6語(yǔ)法，就要安裝babel-loader來(lái)解析成js語(yǔ)法。接下來(lái)以sass-loader為例，
在項(xiàng)目根目錄下執(zhí)行：npm install sass-loader --save-dev
如上圖，提示我們已經(jīng)安裝成功了，此時(shí)在看package.json文件，會(huì)發(fā)現(xiàn)與之前有所不同：
沒(méi)錯(cuò)，它顯示了我們剛才局部安裝的webpack和sass-loader依賴(lài)項(xiàng)。文件默認(rèn)安裝到了node_modules目錄下。表示我們已經(jīng)可以使用sass-loader了。通常對(duì)css的處理我們還要在安裝style-loader和css-loader。
有一點(diǎn)注意的是，默認(rèn)sass-loader編譯后的css會(huì)直接結(jié)成到index.html文件的header中去，而我們一般開(kāi)發(fā)中都期望提取出一個(gè)css文件，再在html中l(wèi)ink引入。所以我們還要用到webpack的plugins插件項(xiàng)目，再安裝一個(gè)插件extract-text-webpack-plugin。此外還需要安裝 style-loader, ? css-loader。
繼續(xù)執(zhí)行： ?npm install style-loader --save-dev
? ? ? ? ? ? ? ? ? ?npm install css-loader --save-dev
? ? ? ? ? ? ? ? ? ?npm install extract-text-webpack-plugin --save-dev
可以看到
style-loader和css-loader 和 extract-text-webpack-plugin安裝完畢。
接下來(lái)終于開(kāi)始看在webpack.config.js中怎樣進(jìn)行配置使用了。
我們的小飛機(jī)組裝完畢，進(jìn)入調(diào)試階段。
5. sass-loader
打開(kāi)webpack.config.js文件，進(jìn)行下圖配置：
entry是頁(yè)面中的入口文件，比如我這邊的入口文件時(shí)main.js
output:是指頁(yè)面通過(guò)webpack打包后生成的目標(biāo)文件放在什么地方去，我這邊是在根目錄下生成public文件夾，指示webpack生成bundle.js放到里面
module.loaders：是文件的加載器配置，我們剛才安裝了sass-loader，現(xiàn)在要通過(guò)extract-text-webpack-plugin插件將編譯完成的css單獨(dú)提取出來(lái)供我們使用。具體配置如圖。
接下來(lái)我們看看index.html和index.scss以及main.js是怎樣的。
html：
因?yàn)槲覀冏罱K引用的是public下生成的bundle.js ?和 index.css，所以如圖寫(xiě)引用路徑。這沒(méi)啥好說(shuō)的了。
scss：
這里就直接寫(xiě)我們開(kāi)發(fā)中的sass代碼，坐等webpack編譯成index.css輸出到public中。
main.js
主js文件里，我們只引入scss文件，用強(qiáng)大的require語(yǔ)法簡(jiǎn)單粗暴。
藍(lán)后，我們就可以在命令行執(zhí)行 webpack -w 來(lái)啟動(dòng)webpack了！
關(guān)于webpack的啟動(dòng)方式：
webpack ? ? ? ? // 最基本的啟動(dòng)webpack的方法
webpack -w ? ? ?// 提供watch方法；實(shí)時(shí)進(jìn)行打包更新
webpack -p ? ? ?// 對(duì)打包后的文件進(jìn)行壓縮
webpack -d ? ? ?// 提供source map，方便調(diào)式代碼
小飛機(jī)，終于要起飛了~！
藍(lán)而。。。。。。
一片片的紅海啊。。有點(diǎn)刺眼，我們看看發(fā)生了什么，原來(lái)是提示沒(méi)有安裝node-sass模塊，那么我們繼續(xù)安裝：
npm install node-sass --save-dev
安裝報(bào)錯(cuò)提示我要安裝xcode，經(jīng)查node-sass依賴(lài)xcode安裝時(shí)一并安裝的一些文件，所以我又安裝的xcode，再次運(yùn)行，安裝成功。
藍(lán)后，
再次執(zhí)行 webpack -w：
感動(dòng)哭。。終于綠了，說(shuō)明我們的webpack啟動(dòng)成功了，這時(shí)候再看文件目錄，發(fā)現(xiàn)public目錄下多了index.css和bundle.js，說(shuō)明打包成功：
我們直接瀏覽器打開(kāi)index.html來(lái)看一看頁(yè)面是否順利生效。
看來(lái)是生效了，控制臺(tái)也沒(méi)有報(bào)錯(cuò)。說(shuō)明我們的webpack對(duì)sass和js的編譯和打包順利完成！
6. 接下來(lái)我們看一下js作為模塊怎樣來(lái)引入使用
我們之前新建了module1.js，我們把這個(gè)js文件作為一個(gè)模塊來(lái)引入我們的main.js。編輯module1.js：
我們先在控制臺(tái)打印一串文本 hello webpack，然后在用exports方式暴露出兩個(gè)方法供外部調(diào)用。
接下來(lái)在main.js中require：
我們?cè)趍ain.js中引入模塊，然后賦給變量 mod，mod就可以調(diào)用模塊暴露出來(lái)的方法！接下來(lái)就是見(jiàn)證奇跡的時(shí)刻：
看到這里我已經(jīng)內(nèi)牛滿(mǎn)面...
我們的小飛機(jī)終于起飛了...
至此，webpack基本跑起來(lái)了，當(dāng)然，我們還可以把vue、browserSync集成到webpack中，這里就先不說(shuō)了，改日再另起文章分別說(shuō)說(shuō)browserSync和vue怎樣集成到webpack中。
4.最后
說(shuō)實(shí)話(huà)這是我的第一篇正式內(nèi)容的文章，以前傻乎乎的就沒(méi)想過(guò)總結(jié)點(diǎn)什么，當(dāng)然上面的內(nèi)容也很簡(jiǎn)陋，介紹的不詳細(xì)，也很可能會(huì)有不嚴(yán)謹(jǐn)或錯(cuò)誤之處，限于本人水平，大家有不明白的地方可以搜一下其他大牛的經(jīng)驗(yàn)，提出來(lái)一起進(jìn)步。最近學(xué)習(xí)webpack也是翻了很多資料，接下來(lái)還要繼續(xù)深入學(xué)習(xí)，前端之路，漸行漸遠(yuǎn)。。。不說(shuō)了，要下班了，我還要去趕班車(chē)...886下了
附本文github源碼鏈接：點(diǎn)此下載
用git克隆到本地：git clone https://github.com/lupinge/webpack-demo.git
打開(kāi)終端命令行工具進(jìn)入到對(duì)應(yīng)目錄webpack-demo直接執(zhí)行 webpack -w 即可。
