前端乾貨系列----入門webpack這一篇文章就夠了

博主學習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的時候感受很是棒的文章，不讀這篇文章也必定要讀下面的文章：

webpack官網，能夠一步一步根據這個進行操做，實現打包

webpack使用場景的講解

webpack的許多小技巧（不是直接寫明瞭，可是能從裏面挖出來，很是棒！）,裏面是一系列的文章。