現在頁面的功能和需求越來越複雜，繁複雜亂的JavaScript代碼和一大堆的依賴包都需要包含在前端頁面中。如果還用手動處理就有點像在現代戰場上使用小米加步槍的味道了。
為了減小開發的複雜度，前端社區湧現出了層出不窮的實踐方案，比如TypeScript擴展語言、SCSS、LESS類的CSS預處理器，還有模塊化思想等。這些新興技術的出現一定程度上提高了我們的編程效率，然而它們還不能被瀏覽器直接識別。手動處理它們又無疑會顯得效率不高，同時早期一些模塊打包器不能完全滿足目前大型項目對代碼分割和靜態資源無縫模塊化的迫切需求，因此，WebPack應運而生了。
今天，本文就向你介紹這款前端工具WebPack。
一、什麼是WebPack？
我們先來看看官方解讀：
WebPack 是一個現代 JavaScript 應用程序的模塊打包器（module bundler），它將你的項目作為一個整體，通過入口文件（如index.js）找到所有的依賴文件，並遞歸地構建一個依賴關係圖（dependency graph），其中包含應用程序需要的每個模塊，然後使用loaders將所有這些模塊打包成少量的（通常只有一個）、瀏覽器可以識別的bundle，再交給由瀏覽器去加載。其目的就是解決現在前端越來越複雜的文件依賴問題。
如下圖所示：
通俗的講，WebPack通過分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），將其轉換和打包為合適的格式供瀏覽器使用，並根據指定的規則實現靜態資源的分類合併，減少頁面請求。
二、為什麼要用WebPack？
簡單的說，使用工具當然是為了提升效率啦~~
WebPack的以下幾大優勢使得它深受前端開發人員的喜愛：
·模塊化：它能把各種資源，如JS、coffee、樣式（含less/scss）、圖片等都作為模塊來使用和處理，把複雜的程序簡單化
·方便舊代碼遷移：它的腳本使用CommonJS形式來書寫，並提供對AMD/CMD的支持，因此很方便的就可以把舊代碼遷移
·可擴展性強：WebPack有一個智能解析器，能處理幾乎所有的第三方庫，支持多種插件
可以說，可擴展性強是WebPack的最大優勢和特色了，在當今這個快速更迭的前端行業，不支持各種插件就等於是沒有前景可言，WebPack支持多種多樣的插件，能夠滿足你對各種插件的依賴。
三、如何使用WebPack？
首先需要將WebPack進行全局安裝，在本地建立一個空的項目文件夾，如WebPack test，在文件夾目錄下打開終端，輸入：
npm install –g WebPack
如下圖所示：
安裝完成後，你可以手動到項目目錄下建立一個package.json文件，來增加項目的描述信息，如項目名、版本、入口文件等等，也可直接在終端輸入命令：
npm init
這將會自動在根目錄下創建該文件，命令會自動提示你輸入項目的相關信息，你可以自行定義，也可以直接回車使用默認值，如下圖所示：
由於WebPack是全局安裝的，我們需要將其加入項目中，作為依賴包使用，繼續執行如下命令：
npm install ——save-dev WebPack
此時我們的項目文件中將會出現相關的依賴包node_modules.之後，你就可以創建自定義的文件目錄來存放項目的相關文件啦~~
例如，我們可以在項目的根目錄下創建兩個文件夾src和template，分別用來存放自己編寫的js文件和WebPack打包生成的文件，然後再創建一個index.html文件放在根目錄下作為展示頁面，index.html的內容如下。
接下來我們需要在src文件夾下實現兩個js文件，作為WebPack打包的源文件，分別為root.js和node.js.兩個文件的內容如下圖所示。
這兩個文件中root.js需要依賴node.js的實現，同時我們將root.js作為WebPack打包的入口文件。這裡為了便於後續文章內容的理解，先闡明WebPack的四個核心概念：入口（entry）、輸出（output）、loader、插件（plugins）。
入口（entry）是WebPack打包各個文件依賴關係的起點（entry point），它告訴 WebPack 從哪裡開始，並根據依賴關係圖確定需要打包的內容。
輸出（output）是告訴WebPack如何去處理這些打包文件，並且最終這些打包內容生成到哪裡。
Loader是WebPack中相對比較重要的一個概念，它需要識別出（identify）應該被對應的 loader 進行轉換（transform）的那些文件並且轉換這些文件，從而使其能夠被添加到依賴圖中。
插件（plugins）相對於Loader而言的不同之處在於Loader 僅在每個文件的基礎上執行轉換，而插件（plugins） 更常用於在打包模塊的 “compilation” 和 “chunk” 生命週期執行操作和自定義功能。
為了方便地對項目依賴文件進行編譯，WebPack允許我們通過配置文件的方式把所有與打包相關的信息放到裡面，提高編譯效率。
那麼我們要如何來寫這個配置文件呢？
首先我們需要在項目的根目錄下創建一個名為webpack.config.js的文件，文件中配置內容如下：
其中entry就是我們前面提到的入口文件，需要在配置項中告訴WebPack編譯器我們要去哪裡尋找項目的入口文件；output配置項則定義了編譯後的打包文件的輸出目錄和文件名稱，其輸出目錄由path項指定，文件名稱則由filename指定。本文中以前面創建的template目錄作為打包文件的輸出路徑。
然後我們就可以執行WebPack的編譯命令了，我們需要在終端進入到項目的根目錄下然後執行WebPack，該命令會自動使用webpack.config.js中的配置內容。
配置完成後，在根目錄打開index.html文件，即可看到意料之中的結果啦~
在實際項目中，可能有多種WebPack命令，這些命令往往是比較複雜的。為此，我們可以通過配置npm來代替他們，通常是“npm run +配置命令”的形式，而這些配置則是在package.json文件中的script標籤中完成的，且可以設置多個不同的json對象值。其中，start命令是npm內置的特殊命令，其執行不需要加額外的run命令，直接輸入npm start即可執行。
由上圖可知，經過script配置後，通過npm start命令可以實現與WebPack命令同樣的打包結果。
值得注意的是，打包之後的文件是很不容易找到對應的源文件的，這也就很不利於我們的調試工作。彆著急，這些問題WebPack早就替你想到了，所以它還提供了一個Source Maps功能，來獲取源文件和編譯後文件的對應關係，只需要簡單地配置devtool，就可以很容易地在調試時定位錯誤，大大提升了開發調試效率。
在實際開發過程中，我們希望對代碼的修改能及時自動反映在瀏覽器中，而不是總是手動編譯運行。為此WebPack提供了一個可選的本地開發服務器，該服務器基於node.js構建，是一個單獨的組件，要配置它需要提前安裝該服務器作為項目的依賴，在終端運行以下命令即可完成安裝。
npm install ——save-dev WebPack-dev-server
然後，需要對devserver進行配置，有以下四個內容：
·contentBase：設置提供服務器的項目目錄
·port：設置瀏覽器的監聽端口
·inline：true，設置為true表示瀏覽器會自動監聽端口並時時刷新頁面
·historyApiFallback：設置頁面是否自動跳轉
在此基礎上，還需要在package.json文件的script對象中加上一個json對象“server”： “WebPack-dev-server ——open”，此時，本地服務器的配置就大功告成了！
嘗試著在終端運行命令：
npm run server
以上就是WebPack的基本功能啦，用它來打包我們的項目灰常的簡單~~
千萬別以為只有這點功能而小看了WebPack！在實際的項目開發過程中，我們更需要的是它強大的其他特性，比如loaders、plugins插件等，這些都可以根據自己的需要進行配置~~
最後，最最重要的是，打包完的項目如何簡單健康的跑起來呢？最靠譜的選擇當然是開發者中心啦~~只需要將我們打包好的文件上傳到開發者中心，進行構建並一鍵部署，就可以看到我們的應用穩定的跑起來啦！
也希望大家可以來到用友雲開發者中心（https://developer.yonyoucloud.com），體驗與Docker技術相關的更多功能，一起探索容器雲的世界。雲上應用部署及運行，在這裡可以輕鬆實現。
閱讀更多 用友雲平臺 的文章
關鍵字: 牛刀小試 腳本語言 JavaScript
