曾經筆者剛覺得會用Chrome Dev Tool這種裝逼技能的時候（也就是F12），就喜歡隨便看看不同站點的原始碼（其實也就是想摳摳圖下來），然後裝逼似的感慨一句：

哇塞，前端好JB煩啊

慢慢地，當筆者接觸新的專案的時候，逐漸接觸到了前端的一些新穎的，流行的也很吸引人的東西，無論是ES6，Vue，Webpack，還是Rem佈局，模組化開發及載入，前端自動化構建也好，當筆者第一次拿到前人寫的程式碼的時候，筆者總結了一下主要有兩個感受：

1.這是什麼鬼？

2.我開始矛盾了

先說第二點，為什麼突然開始矛盾了：

1.為什麼非要用Vue，為什麼非要用Rem佈局，臣妾不會啊

2.為什麼非要用Webpack去做前端自動化構建，我不壓縮，不打包程式碼也不影響我的開發啊 

3.玩WEB全棧到底是在ubuntu上開發還是在windows上開發好

......等等，筆者是個喜歡多想的人，多想就會多矛盾，臥槽......

或許以上的矛盾僅僅是仁者見仁，智者見智，畢竟條條大路通羅馬，站在不同的角度，處理不同的問題，總會有不同的思考方式和結果，不過至少在小小的筆者看來：

筆者覺得在被搞死之前，還是希望能留下一些自己思考的內容給後面正在面臨或者即將要面臨這些問題的同仁們一點點自己思考的東西，希望能幫助到你們，也希望能幫助到筆者慢慢成長

這裡必須提一句：

當筆者是個菜逼的時候，S大神和我說，你這水平不行啊，懂不懂Grunt，懂不懂WEB安全，會不會做前端負載......

你個渣渣

當筆者還是個菜逼的時候，S大神又和我說，你這水平不行啊，你懂不懂CMD、AMD模組規範啊，懂不懂如何做前端頁面效能優化，懂不懂響應式原理啊......

你個渣渣

當筆者TM的還是個菜逼的時候，S大神又和我說，你這水平不行啊，你懂不懂前端模組化開發，你會不會用Webpack打包啊，你會不會Angular啊，你會不會Vue啊，你會不會Zepto啊，你懂不懂ES6啊，你懂不懂Redis啊......

你個渣渣

（這裡面，大神的“懂”和“用”指的是深入瞭解其原理，應對各種不同的問題場景，生產最優解決方案，和我們的“懂”和“用”是不一樣的，我的“懂”指的是：哦，原來有這麼個東西啊，我的“用”指的是：哦，文件上給的API挺全啊）

如此接二連三的，尊嚴掃地被嘲諷後，筆者覺得：

我。。。。。。是不是來錯地方了，當個電話接線員或者打字員也許就是我的職業的終點了吧

不要再說你是個開發了

不過，假裝是個開發也好啊

那麼，終於進入了重點，這次就想簡單的說說：

Webpack這個東西

儘管模組化開發在WEB開發中是個十分重要的規範和思想，不過這次先不提CMD，AMD或者UMD這些模組開發的規範，抑或是FIS3這種紅極一時的前端工程化解決方案，如果大家感興趣的話，也可以自行百度或者谷歌

正題前先用神圖鎮樓：

官網對webpack的定義是Module Bundler，顧名思義就是模組載入器兼打包工具，看圖知道，這是個把具有依賴關係的各種檔案打包成一系列靜態資源的解決方案，使用閉包

從上面的圖可以看出來：

1.能被模組化的不僅僅是JS了

2.這個工具似乎可以替代部分grunt/gulp的工作，就比如打包，壓縮等等

3.自定義模組載入的規則，生成的靜態資源似乎也可以成為單獨的模組

4.基於以上的三條，看起來對大型專案來說，這應該挺方便的

官方文件的連結：http://webpack.github.io/docs/

官方原始碼的連結：http://webpack.github.io/

其實，說簡單點,webpack就是個配置檔案，告訴載入器，模組應該如何載入，應該如何打包，他的所有魔力都是在這一個檔案中發生的，也就是像這種webpack.config.js檔案，這個配置檔案主要分為三大塊：

entry：入口檔案，讓webpack用哪個檔案作為專案的入口

output：出口，讓webpack把處理完成的檔案放在哪裡

module模組：要用什麼不同的模組來處理各種型別的檔案

這裡舉個小例子

獨立打包CSS樣式檔案：

有時候可能希望專案的樣式不要被打包到指令碼中，而是獨立出來作為.css，然後在頁面中使用傳統的link標籤來引入，這時候需要藉助extract-text-webpack-plugin來幫忙

接下來安裝我們的Loader：

loaders是一個數組，包含要處理這些程式的Loader，其中每個loader裡面包含一個正則表示式，就是需要匹配的檔案，這裡我們用到了css和style，像less或者sass也是同理，注意loaders的處理順序是從右到左的，這裡就是先執行css-loader然後是style-loader

在這裡新增需要使用的plugin和配置要生成的CSS的路徑：

打包後的結果：

當然，我們也可以使用webpack直接將我們指定的打包好的檔案插入到我們指定的html中，這時我們可以藉助html-webpack-plugin，當然，怎麼安裝的話，同上，不懂命令的話，可以參考下npm的相關內容

既然我們可以做指定，那麼無非就是我們要在哪個html檔案中使用哪個css檔案罷了，這時我們可以進行如下配置：

filename：要被插入哪個html檔案

template：這個html檔案使用的模版

chunk：要插入入口中的哪些個檔案

inject：要把對應的script或者css插入到檔案的哪個位置中

看下生成的檔案：

還是挺高階的吧

這裡再提一點常用的webpack命令：

以上內容也是筆者在開發的過程中，邊研究邊記錄下來的，寫的內容不多，像JS打包，圖片壓縮打包，使用CDN/遠端檔案，與VUE或者React配合，或者grunt配合等等，筆者並沒有提，一方面是筆者的專案中暫時沒有用到，另一方面也是筆者暫時還沒有深入去了解這些七七八八的東西（這是筆者的鍋，筆者背了）

以上內容，大神們不免會有嫌棄，畢竟僅僅是淺談筆者目前專案中開發用到的一點點技術和筆者自己一點點的積累，有啥問題也請大神們指點指點，畢竟筆者也還是個孩子，孩子的郵箱還是那個郵箱：

[email protected]

最後坦白來說，想寫的東西有很多，想研究的東西有很多，想說的廢話也有很多，嘿嘿，不過畢竟細水長流嘛，筆者也會繼續默默的學習，默默的更新部落格，儘管路不好走，但還得走啊！