上一篇webpack文章講述的是entry、output、plugin三大概念的概念與功能，今天主要是對loaders這一核心的解說。loaders的作用在於各種格式的檔案進行轉換，例如es6轉碼，sass/less的解析，圖片資源轉換成base64用於減少http請求等等。

（一）babel-loader

在專案中，根據官網http://babeljs.io/docs/setup/#installation提供的安裝命令進行babel依賴包的安裝。

接著，在webpack.config.js裡進行相應的配置。

test是對js檔案進行匹配，loader則將進行檔案轉換。同時，也需要進行presets配置，實現es2015/es2016/es2017的轉換，令瀏覽器可識別。

之後，進行babel-preset-env外掛的安裝。

使用命令npm run webpack進行執行編譯打包

此時顯示的是打包成功終端程式碼。然而，命令終端中顯示的打包時間為6s，打包時間過長造成效能問題，因此需要通過在loaders裡面配置exclude以及include。路徑的配置為絕對路徑。打包時間也大大減少。

（二）css的相關配置

為了webpack對css的解析，需要下載依賴包，css-loader、style-loader。

同時，需要在loaders裡對css進行配置

postcss-loader以及autoprefixer兩個外掛，是為了實現自動新增css3字首的功能，而importLoaders為了實現css中引用模組import時匹配的。

另外，也可以對sass與less等擴充套件語言進行配置。

安裝的命令：

webpack.config.js的loaders配置

（三）模板檔案

首先，安裝解析的依賴包html-loader，

接著，在loaders裡進行配置

（四）圖片資原始檔

有兩種外掛可以實現webpack對圖片資源的處理。file-loader與url-loader。

使用file-loader,執行命令

同時，需要配置loaders， 

query的配置則是對打包後的圖片進行名稱修改。進行webpack打包後，此時圖片資源已打包完成。

另外，關於url-loader的配置。首先，先安裝url-loader，

之後同時需要進行loader的配置。

執行webpack命令之後，打包成功發現沒有打包的圖片名以及js檔案變大，則按照了base64編碼將圖片進行展示。

而http請求的方式與base64的方式有優勢與劣勢，http雖然會新增不必要的請求，但同時也能將請求的路徑進行快取；而base64雖然能減少服務請求，但同時也增大了js的檔案體積，增加了不必要的臃餘。

另一方面，無論哪種方式，對於圖片的體積都是可以進行壓縮的，需要的外掛是image-webpack-loader。

打包成功後，檢視打包圖片後的體積，體積變小了。

總結：這篇webpack文章講的是對loaders的應用，分別對es6、sass、less、html、image等檔案的解析轉換。

更多文章請關注公眾號