現在頁面的功能和需求越來越複雜，繁複雜亂的j**ascript**和一大堆的依賴包都需要包含在前端頁面中。如果還用手動處理就有點像在現代戰場上使用小公尺加步槍的味道了。
為了減小開發的複雜度，前端社群湧現出了層出不窮的實踐方案，比如typescript擴充套件語言、scss、less類的css預處理器，還有模組化思想等。這些新興技術的出現一定程度上提高了我們的程式設計效率，然而它們還不能被瀏覽器直接識別。手動處理它們又無疑會顯得效率不高，同時早期一些模組打包器不能完全滿足目前大型專案對**分割和靜態資源無縫模組化的迫切需求，因此，webpack應運而生了。
今天，本文就向你介紹這款前端工具webpack。
一、什麼是webpack？
我們先來看看官方解讀：
webpack 是乙個現代 j**ascript 應用程式的模組打包器（module bundler），它將你的專案作為乙個整體，通過入口檔案（如index.js）找到所有的依賴檔案，並遞迴地構建乙個依賴關係圖（dependency graph），其中包含應用程式需要的每個模組，然後使用loaders將所有這些模組打包成少量的（通常只有乙個）、瀏覽器可以識別的bundle，再交給由瀏覽器去載入。其目的就是解決現在前端越來越複雜的檔案依賴問題。
如下圖所示：
通俗的講，webpack通過分析你的專案結構，找到j**ascript模組以及其它的一些瀏覽器不能直接執行的拓展語言（scss，typescript等），將其轉換和打包為合適的格式供瀏覽器使用，並根據指定的規則實現靜態資源的分類合併，減少頁面請求。
二、為什麼要用webpack？
簡單的說，使用工具當然是為了提公升效率啦~~
webpack的以下幾大優勢使得它深受前端開發人員的喜愛：
·方便舊**遷移：它的指令碼使用commonjs形式來書寫，並提供對amd/cmd的支援，因此很方便的就可以把舊**遷移
·可擴充套件性強：webpack有乙個智慧型解析器，能處理幾乎所有的第三方庫，支援多種外掛程式
可以說，可擴充套件性強是webpack的最大優勢和特色了，在當今這個快速更迭的前端行業，不支援各種外掛程式就等於是沒有前景可言，webpack支援多種多樣的外掛程式，能夠滿足你對各種外掛程式的依賴。
三、如何使用webpack？
首先需要將webpack進行全域性安裝，在本地建立乙個空的專案資料夾，如webpack test，在資料夾目錄下開啟終端，輸入：
npm install –g webpack
如下圖所示：
安裝完成後，你可以手動到專案目錄下建立乙個package.json檔案，來增加專案的描述資訊，如專案名、版本、入口檔案等等，也可直接在終端輸入命令：
npm init
由於webpack是全域性安裝的，我們需要將其加入專案中，作為依賴包使用，繼續執行如下命令：
npm install ——s**e-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 ——s**e-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外掛程式等，這些都可以根據自己的需要進行配置~~
nodejs 牛刀小試
目前在做乙個使用者登入驗證的案例 真是彎路 彎路 再彎路啊 不多說上 用到的模板 express 資料庫mysql 使用者校驗 socket.on judgeuser function nickname function err1,rows if rows.length 0 else 使用者註冊 s...
查詢 牛刀小試
給定乙個值k，在含有n個記錄的表中找出關鍵字等於k的記錄。若找到則返回該記錄的的位置或資訊，否則查詢失敗，返回相關的指示資訊。一 順序查詢 思路 元素沒有順序，因此要掃瞄整個陣列中的所有元素，逐個與k比較 相等則查詢成功，返回該元素位置 如果掃瞄結束沒有發現和k相等的元素，返回0 int searc...
dynamic 牛刀小試
今天在網上看帖時看到了這樣乙個問題 現在我用反射 personmodel.dll 呼叫乙個型別方法 getallpersons 返回person,其中person為 personmodel.dll 在定義，請問，我要怎麼操作才能取回返回的陣列值呢？恰好手頭沒事做，就順手寫了乙個demo，但在獲取到結...