Webpack使用指南

什麼是Webpack？我們為什麼需要它？由於現在的Web應用功能越來越複雜，為了提高開發效率，避免重複勞動，這就要求我們使用模組化的開發方式，但是遺憾的是，JavaScript並沒有原生的模組化機制。為了解決這個問題，偉大的先驅們想出了各種各樣的辦法，最後CommonJS，AMD，CMD等各種模組規範紛紛形成。比如CommonJS規定：模組可以通過require引入，必須通過module.exports匯出。可是我們的程式碼最終很可能是要執行在瀏覽器上的，這些關鍵字瀏覽器並不認識，需要轉換成瀏覽器能夠識別的程式碼才能正常執行。而且每一個模組都是一個單獨的JavaScript檔案，我們當然不能把這些檔案都用script標籤引入到html中，第一是檔案太多，引入耗時耗力，不划算；第二，這樣會導致載入頁面是請求的個數變多，載入時間變長，影響使用者體驗。我們希望能把這些模組打包成一個或少量幾個JavaScript檔案，然後再去引入並使用它們。Webpack就是一個可以幫我們完成這個任務的工具。（當然還有其他工具，比如Gulp，Grunt。另外，Webpack也不僅僅只有這些功能。）

要使用Webpack，首先要全域性安裝它：npm install --global webpack。接下來在專案的根目錄下建立一個名為webpack.config.js的檔案，當我們使用webpack命令打包的時候，Webpack會讀取這個配置檔案並按配置執行。這個配置檔案的結構其實很簡單，就是一個JavaScript物件。

上圖簡單地介紹了Webpack的輸入輸出設定，接下來需要根據大家各自的專案特性來完成module和plugins部分的編寫。以基於React構建的專案為例，我們用到了JSX語法，還用到了一部分ECMAScript 2015的特性，我們需要先轉換成瀏覽器能識別的JavaScript，還有我們的樣式採用了預編譯語言LESS，這同樣也需要處理，其他一些包括小於8KB的圖片轉換成Base64字串節約請求，程式碼的壓縮、混淆，以及為了優化首次載入速度實現模組的按需載入等都是我們的需求。一開始，我們不必考慮得這麼周全，可以先考慮完成最基本的需求然後再慢慢優化。這裡我就介紹一些通用的功能。

首先了解一個事實，Webpack完成我們的需求主要通過兩種方式，一個是loader，另一個是plugin。為了貫徹Unix的哲學，一次只做一件事，每一個loader都只負責一個特定的功能。比如babel-loader只能用來轉換JavaScript。這些loader在使用之前也必須通過Webpack安裝，可以使用npm install --save-dev [package-name]來安裝。然後通過配置檔案去使用這些loader。下面是一個簡單的例子：

上面這段程式碼展示瞭如何使用一個loader，每個loader都有自己的配置項，可以去檢視它們的文件去了解具體如何使用，不過我認為最關鍵的是分析出自己到底需要哪些功能，只有知道需求，才知道該使用哪個loader。

除此之外，Webpack還提供了一些外掛，比如程式碼壓縮。使用外掛的方式同樣是配置webpack.config.js。只不過需要依賴Webpack，和loader不同，使用Webpack自帶的外掛要求在專案根目錄下也要安裝Webpack，然後將它引入到webpack.config.js中。

const webpack = require( 'webpack' );

還有一些第三方提供的外掛，比如htmlWebpackPlugin，也需要先安裝對應的npm包，然後按照文件的配置項使用就可以了。

完成之後，在專案根目錄下執行webpack命令就可以啦！

總結一下，Webpack的使用並不困難，最主要的問題是你要清楚自己需要什麼，哪些loader或者plugin能夠做這件事情。Have fun!

打個小廣告，這是我的微信公眾號，歡迎關注！