1.安裝npm

? ?不管你想使用grunt，還是gulp俐填，還是webpack终佛，你都要用到npm俊嗽，相信大家都對此不陌生了，npm是什么東東呢铃彰？npm其實是Node.js的包管理工具（package manager）绍豁，因為我們使用各種框架會依賴需要多js代碼包，而如果需要就到網(wǎng)上搜索下載解壓在使用牙捉，會非常非常繁瑣麻煩竹揍，所以npm就應(yīng)運而生了，它是一個集中管理的工具邪铲，大家都會把自己開的模塊打包后上傳到npm官網(wǎng)芬位，如果要使用直接通過npm下載安裝即可。

? ?那么我們怎么安裝npm带到，其實我們在安裝node.js的時候npm就已經(jīng)安裝好了昧碉，所以我們要先安裝node.js，安裝完畢后我們就可以在命令行中輸入npm -v揽惹，來查看npm版本被饿。（命令行工具我在mac下使用的是iTerm2，windows可以安裝git bash）

npm -v

2.什么是webpack

什么是webpack搪搏，它有什么優(yōu)點狭握？

如果你有過gulp或grunt的使用經(jīng)驗，就不難理解webpack是個什么東東慕嚷，webpack是一個前端工具哥牍，可以讓各個模塊進行加載毕泌、預(yù)處理喝检，再進行打包，它有g(shù)ulp和grunt的大部分基本功能撼泛，它的最大區(qū)別就是提供了模塊化解決方案挠说，可以把各種資源作為模塊來使用和處理。

webpack的優(yōu)點如下：

1. webpack 遵循commonJS 的形式愿题，但對 AMD/CMD 的支持也很全面损俭，方便舊項目進行代碼遷移蛙奖。

2. 能被模塊化的不僅僅是 JS ，所有的靜態(tài)資源杆兵，例如css雁仲，圖片等都能模塊化，即以require的方式引入琐脏。

3. 開發(fā)便捷攒砖，能替代部分 grunt/gulp 的工作，比如打包日裙、壓縮混淆吹艇、圖片轉(zhuǎn)base64等。

有一點注意的就是webpack的思路是把我們所有的require資源都整合集成到一個js文件中昂拂，我們通常命名為bundle.js

3.安裝和配置webpack

接下來我們就開始一步一步的安裝使用webpack受神。（以下以mac為例）

我們先創(chuàng)建項目目錄結(jié)構(gòu)，根目錄是webpack-demo格侯，結(jié)構(gòu)如下：（源碼下載在文末）

項目結(jié)構(gòu)

app文件夾下放置我們的開發(fā)文件鼻听，比如 index.scss文件和主邏輯main.js文件，以及作為模塊文件的module1.js养交，將來main.js和module1.js都會整合到public目錄下的bundle.js中精算，我們的index.html直接引用bundle.js即可。public目錄就是瀏覽器執(zhí)行需要的文件碎连，包括index.html灰羽、將來index.sass生成的index.css和bundle.js。webpack.config.js是webpack的配置文件鱼辙，稍后會詳細(xì)說明廉嚼。

原材料準(zhǔn)備好了，接下來我們就開始正式安裝webpack了倒戏。

1.我們首先要在根目錄下生成package.json文件怠噪，它會顯示以后我們通過npm安裝的各種依賴包，我們通過終端進入根目錄杜跷，執(zhí)行：npm init

npm init

然后終端會讓我們輸入一堆信息傍念，隨便寫即可。最后輸入yes確認(rèn)葛闷，會發(fā)現(xiàn)我們的根目錄下自動生成了一個package.json文件

package.json

內(nèi)容就是一堆json數(shù)據(jù)憋槐，基本就是我們剛才在終端里輸入的信息，大致如下：

package.json

package.json生成好了我們先放一放淑趾。

2.接下來通過全局安裝webpack

在終端執(zhí)行cd -- 退回到全局阳仔，然后執(zhí)行：（sudo） npm install -g webpack，mac下報錯的話前面可能需要加sudo獲取管理員權(quán)限（下同）扣泊。

這樣就安裝好了webpack近范，可以再全局通過webpack -v來查看是否安裝成功嘶摊。

3.然后我們進入項目根目錄局部安裝webpack，進入./webpack-demo评矩，執(zhí)行：npm install webpack --save-dev

npm install webpack --save-dev

如果看到了這一頁說明局部安裝webpack成功了叶堆。此時根目錄下會出現(xiàn)一個node_modules文件夾。

node_modules

以后我們在根目錄下通過npm安裝的各種依賴包都會默認(rèn)安裝到這個文件夾下面斥杜。

現(xiàn)在我們項目的webpack框架就準(zhǔn)備好了蹂空，接下來我們要使用它來處理各種東西了，拿最常見的css預(yù)處理來說吧果录，我個人常用sass上枕，那么怎么用webpack來處理sass為我們所用呢，現(xiàn)在就來說說loader加載器弱恒。

4. loader加載器辨萍。

webpack是通過loader加載器來管理使用各種插件和工具的，比如我們要使用sass返弹，就要通過npm安裝sass-loader加載器锈玉，然后在之前提到的 webpack.config.js文件中進行配置使用，我們要是使用es6語法义起，就要安裝babel-loader來解析成js語法拉背。接下來以sass-loader為例，

在項目根目錄下執(zhí)行：npm install sass-loader --save-dev

npm install sass-loader --save-dev

如上圖默终，提示我們已經(jīng)安裝成功了椅棺，此時在看package.json文件，會發(fā)現(xiàn)與之前有所不同：

package.json

沒錯齐蔽，它顯示了我們剛才局部安裝的webpack和sass-loader依賴項两疚。文件默認(rèn)安裝到了node_modules目錄下。表示我們已經(jīng)可以使用sass-loader了含滴。通常對css的處理我們還要在安裝style-loader和css-loader诱渤。

有一點注意的是，默認(rèn)sass-loader編譯后的css會直接結(jié)成到index.html文件的header中去谈况，而我們一般開發(fā)中都期望提取出一個css文件勺美，再在html中l(wèi)ink引入。所以我們還要用到webpack的plugins插件項目碑韵，再安裝一個插件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

可以看到

package.json

style-loader和css-loader 和 extract-text-webpack-plugin安裝完畢泼诱。

接下來終于開始看在webpack.config.js中怎樣進行配置使用了坛掠。

我們的小飛機組裝完畢赊锚，進入調(diào)試階段治筒。

5. sass-loader

打開webpack.config.js文件屉栓，進行下圖配置：

webpack.config.js

entry是頁面中的入口文件，比如我這邊的入口文件時main.js

output:是指頁面通過webpack打包后生成的目標(biāo)文件放在什么地方去耸袜，我這邊是在根目錄下生成public文件夾友多，指示webpack生成bundle.js放到里面

module.loaders：是文件的加載器配置，我們剛才安裝了sass-loader堤框，現(xiàn)在要通過extract-text-webpack-plugin插件將編譯完成的css單獨提取出來供我們使用域滥。具體配置如圖。

接下來我們看看index.html和index.scss以及main.js是怎樣的蜈抓。

html：

index.html

因為我們最終引用的是public下生成的bundle.js ?和 index.css启绰，所以如圖寫引用路徑。這沒啥好說的了沟使。

scss：

index.scss

這里就直接寫我們開發(fā)中的sass代碼委可，坐等webpack編譯成index.css輸出到public中。

main.js

main.js

主js文件里腊嗡，我們只引入scss文件着倾，用強大的require語法簡單粗暴。

藍(lán)后燕少，我們就可以在命令行執(zhí)行 webpack -w 來啟動webpack了卡者！

關(guān)于webpack的啟動方式：

webpack ? ? ? ? // 最基本的啟動webpack的方法

webpack -w ? ? ?// 提供watch方法；實時進行打包更新

webpack -p ? ? ?// 對打包后的文件進行壓縮

webpack -d ? ? ?// 提供source map客们，方便調(diào)式代碼

小飛機崇决，終于要起飛了~！

藍(lán)而底挫。嗽桩。。凄敢。碌冶。。

error

一片片的紅海啊涝缝。扑庞。有點刺眼，我們看看發(fā)生了什么拒逮，原來是提示沒有安裝node-sass模塊罐氨，那么我們繼續(xù)安裝：

npm install node-sass --save-dev

安裝報錯提示我要安裝xcode，經(jīng)查node-sass依賴xcode安裝時一并安裝的一些文件滩援，所以我又安裝的xcode栅隐，再次運行，安裝成功。

藍(lán)后租悄，

再次執(zhí)行 webpack -w：

webpack -w

感動哭谨究。。終于綠了泣棋，說明我們的webpack啟動成功了胶哲，這時候再看文件目錄，發(fā)現(xiàn)public目錄下多了index.css和bundle.js潭辈，說明打包成功：

yes

我們直接瀏覽器打開index.html來看一看頁面是否順利生效鸯屿。

index.html

看來是生效了，控制臺也沒有報錯把敢。說明我們的webpack對sass和js的編譯和打包順利完成寄摆！

6. 接下來我們看一下js作為模塊怎樣來引入使用

我們之前新建了module1.js，我們把這個js文件作為一個模塊來引入我們的main.js修赞。編輯module1.js：

module1.js

我們先在控制臺打印一串文本 hello webpack冰肴，然后在用exports方式暴露出兩個方法供外部調(diào)用。

接下來在main.js中require：

main.js

我們在main.js中引入模塊榔组，然后賦給變量 mod熙尉，mod就可以調(diào)用模塊暴露出來的方法！接下來就是見證奇跡的時刻：

html

看到這里我已經(jīng)內(nèi)牛滿面...

我們的小飛機終于起飛了...

至此搓扯，webpack基本跑起來了检痰，當(dāng)然，我們還可以把vue锨推、browserSync集成到webpack中铅歼，這里就先不說了，改日再另起文章分別說說browserSync和vue怎樣集成到webpack中换可。

4.最后

說實話這是我的第一篇正式內(nèi)容的文章椎椰，以前傻乎乎的就沒想過總結(jié)點什么，當(dāng)然上面的內(nèi)容也很簡陋沾鳄，介紹的不詳細(xì)慨飘，也很可能會有不嚴(yán)謹(jǐn)或錯誤之處，限于本人水平译荞，大家有不明白的地方可以搜一下其他大牛的經(jīng)驗瓤的，提出來一起進步。最近學(xué)習(xí)webpack也是翻了很多資料吞歼，接下來還要繼續(xù)深入學(xué)習(xí)圈膏，前端之路，漸行漸遠(yuǎn)篙骡。稽坤。丈甸。不說了，要下班了尿褪，我還要去趕班車...886下了

附本文github源碼鏈接：點此下載

用git克隆到本地：git clone https://github.com/lupinge/webpack-demo.git

打開終端命令行工具進入到對應(yīng)目錄webpack-demo直接執(zhí)行 webpack -w 即可睦擂。