博主學習webpack，並不是因為專案需要，而是因為webpack現在比較流行，所以想學習一下，順便看看對現在的專案是否有用。最後經過思考感覺對當前專案的作用並不大，不過總結了一下webpack適合使用的幾個場景
1.前後端分離的專案，像vue,angular,react都採用了webpack。現在三大主流框架（vue,react,angular）為前後端分離提供了一些基礎條件，使得很多介面不在藉助於後端的模板渲染可以自己進行模板渲染。說實在的如果前端不能自己實現模板渲染，很多需求的實現真的太麻煩了，比如列表，沒有模板渲染，你需要自己寫一串js程式碼實現列表迴圈，現在只需要新增幾個屬性即可實現。博主的專案因為是前後端不分離的，採用的framework進行的渲染，所以感覺webpack起到的作用並不是特別大，而且維護起來還比較麻煩。
2.混合應用開發，像ionic就使用了webpack進行了ts的編譯，極大的方便了開發。只需要搞懂一點點webpack就能夠自動啟動服務，檢測程式碼修改自動重新整理瀏覽器。十分方便
3.SPA應用（單頁面應用）,對於這個個人感覺是非常爽的,webpack將一大堆的檔案打包成一個檔案，不僅減少了開發人員的工作量還解決了請求個數的問題，想想就開心。
如果有其他的使用場景還請水友提出，我將進行補充
本篇文章也僅僅是對webpack入門和一些坑進行的講解，需要提高的同志能學到的東西並不是很多，因為我自己的專案對webpack的使用不多，所以並不想花太多的經歷把webpack搞得太深，只是希望別人聊起webpack我最起碼略知一二，不至於連現如今高大上的webpack都一點不懂，哈哈。
眾多打包工具為何webpack能夠獨佔鰲頭？
在這裡我將通過對比gulp和百度的fis來突出webpack的優點。
gulp：既然gulp被webpack反殺了，一定是有不如人的地方，以gulp為代表的傳統打包最大的問題是解決不了按需打包，就更別說按需載入了，因為傳統的打包思路是遍歷原始檔 => 匹配規則 => 打包/處理，也就是說只要被規則命中了，即便是程式用不到的模組也會被無腦打包，根本原因是按需這個事無法被規則描述，只能被程式邏輯描述。
百度fis：其實在webpack之前不是沒有解決方案，百度fis最得意的地方就是解決了這個問題，並且是理論上堪稱完美的解決方案，我感覺其最大的缺點是需要後端配合，然而你懂的，後端通常不鳥這種需求，百度fis也就不了了之了。
也就是說webpack不僅能夠按需載入，還不依賴後端開發，當然了webpack還實現了分包開發。webpack能實現這些與他的打包邏輯是密不可分的入口檔案 => 分析程式碼 => 找出依賴 => 打包。也就是說入口檔案裡面沒有引用的檔案是不會被打包進來了，就這樣簡簡單單的實現了按需載入，這就是大道至簡吧。這就是webpack最有價值的地方。
webpack入門：
使用webpack你首先電腦裡面要有webpack吧，那就要安裝webpack（需要先確保你安裝了npm）：
1.初始化一個專案（沒有這個也一樣用webpack，不過很少有獨立於npm存在的webpack，我也就不搞特殊了）
npm init複製程式碼2.若要安裝最新版本或特定版本，請執行以下命令之一：
npm install --save-dev webpack
npm install --save-dev webpack@<version>複製程式碼3.如果您使用的是WebPack 4或更高版本，您還需要安裝CLI。
npm install --save-dev webpack-cli複製程式碼注意：這裡有個坑，webpack4實現了零配置，webpack3還沒實現，而網上大部分的文件都是4之前的，導致按照他們的步驟操作會出現錯誤。看別人的部落格只適合於快速閱讀和理解，獲取第一手資訊還是去看官網比較好。webpack官網資料還是特別全的，並且提供了中文版和英文版，不過中文版翻譯的不全，很多都是404錯誤，建議直接看英文版，英語水平不高的可以使用谷歌瀏覽器帶的翻譯。這個錯誤主要是在src資料夾下沒有找到檔案，因為webpack預設的進入檔案指定在src下面。本來想給你們截圖來著，不過發現不放在src資料夾下也能直接打包了，可能是webpack相容了。
4.在根目錄建立webpack.config.js檔案
5.配置webpack.config.js(不配置這個檔案也能進行打包，不過我這裡就不進行這種講解了，因為不管多簡單的配置記錄下來都是很重要的，好記性不如爛筆頭)
入門webpack瞭解entry,module,plugins,output就夠了。最簡單的webpack配置只需要有entry就夠了。
entry:打包入口檔案，這個檔案裡面的配置你可以隨意引用，當你使用webpack打包命令的時候就會將這裡面所引用的所有檔案打包成一個js檔案（這裡僅限於js檔案）採用json的鍵值對的格式。左邊對應的名字，右邊對應著檔案。配置多個就代表你想將多個檔案打包整合
注意：博主這裡的名字叫index/login，是有特殊用途的，會在output這裡講解
output:打包的出口檔案,指你想將打包出來的檔案存了哪裡叫什麼名字。filename檔案的名字,path,檔案的路徑,publicpath用於配置相應的域名。
文中的[name]代表entry中的名字,你如果寫的是index/login生成的檔名字就是index/login.bundle.js,當他放到你指定的path目錄下的時候會自動生成一個index的資料夾來達到分資料夾的作用，是不是相當黑科技。
module：webpack其實只能給js進行打包，他其實是不識別css，檔案，圖片等等的。想要識別這些東西就需要給他配置module下的rules。比較常用的引數就是：text,匹配規則.像文中的/.css$/代表著匹配以css結尾的檔案。use，代表著載入方式，後面的引數代表著採用什麼載入，如果指定錯了就會打包錯誤，像css固定使用style-loader即可，當然了載入方式都是依賴外掛的，需要將style-loader和css-loader外掛通過npm下載下來（這裡就不普及npm的用法了）。
plugins:根據名字你就指定這是外掛了，webpack提供了很多外掛，你通過這些外掛可以實現各種各樣的操作，這裡就不過多概述了
webpack的功能和複雜度遠不止這些，文章中的內容也並不是特別精美，許多更有趣的內容也不知道怎麼表達出來。不過還是要寫下來，萬一幫助到你們了我就賺了，對於博主來說作為一個爛筆頭以後使用的時候也會快速拿起來進行使用。
最後推薦幾篇博主在學習webpack的時候感覺非常棒的文章，不讀這篇文章也一定要讀下面的文章：