簡單粗暴搞定webpack（三）

有了前面兩節作鋪墊，下面的內容就容易的多了。今天我們看一下loaders。

啥叫loaders？從詞意上看，load就是載入的意思。載入啥捏？就是各種工具。

也就是說，我們要把代碼打成模塊、並翻譯成瀏覽器識別的代碼，是需要工具協助的。

比如es6，我們要翻譯成es5，就需要babel這個工具的支持；再比如css打包，也需要額外的工具支持。

我們今天用es6舉例，看一下loaders的具體使用方法。

那麼在這之前呢，我們還需要稍微了解一下這個babel。

babel這玩意，其實是幾個小工具包的集成。

其核心功能位於babel-core這個包里，這個包是必須要引入使用的，就像你用bootstrap必須引入jquery一樣。而對於其他你需要的功能或拓展，就需要安裝單獨的小包。比如解析es6的話，我們需要再裝一下babel-preset-es2015這個工具包。

好，下面我們就來安裝一下這些包包們：

npminstallbabel-core

npminstallbabel-loader

npminstallbabel-preset-es2015

安裝時間還有一點點久的哦，大家要耐心等待~~

好，安裝結束後，原料就有了，我們下面還得寫測試文件做測試。

我們仍舊沿用前面兩節課的例子。不過需要改動兩個js文件。

在helloworld.js中，我們寫點es6語法，然後exports模塊輸出；然後在main.js中require引入進來，使用一下。

helloworld.js:

main.js:

保持不變。

test：使用正則表達式，匹配需要loaders處理的文件，必須。

loader：loader的名稱，必須。

exclude：屏蔽不需要處理的文件或文件夾，可選。

query：為loaders提供額外的設置選項，可選。

ok，下面我們運行一下：

然後打開index.html文件看看：

ok，貌似是成功了哈。別急，因為很多瀏覽器已經支持了es6屬性，我們還是打開bundle.js，查驗一下到底是否編譯成功了：

箭頭函數已經編譯為function，然後let和const關鍵字也被編譯成了var，看來確實是成功了哈~~

好啦，loaders我們就愉快的講完了，你是否已經愉快的學會了呢？有問題可以直接留言提問哈~~

下節課，我們來講一下css和image圖片等資源的打包，敬請期待~~

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！