在上篇博客中我們通過webpack將first.js和entry.js兩個(gè)文件打包成了bundle.js，除此之外還可以通過引入其他的loader，處理各種類型的文件。

loader的介紹

Loader可以理解為是模塊和資源的轉(zhuǎn)換器，它本身是一個(gè)函數(shù)，接受源文件作為參數(shù)，返回轉(zhuǎn)換的結(jié)果。這樣，我們就可以通過require來(lái)加載任何類型的模塊或文件，比如VUE、JSX、SASS 或圖片。

Loader可以通過管道方式鏈?zhǔn)秸{(diào)用，每個(gè)loader可以把資源轉(zhuǎn)換成任意格式并傳遞給下一個(gè)loader，但是最后一個(gè)loader必須返回JavaScript。
Loader可以同步或異步執(zhí)行。
Loader運(yùn)行在node.js環(huán)境中，所以可以做任何可能的事情。
Loader可以接受參數(shù)，以此來(lái)傳遞配置項(xiàng)給loader。
Loader可以通過文件擴(kuò)展名（或正則表達(dá)式）綁定給不同類型的文件。
Loader可以通過npm發(fā)布和安裝。
除了通過package.json的main指定，通常的模塊也可以導(dǎo)出一個(gè)loader來(lái)使用。
Loader可以訪問配置。
插件可以讓loader擁有更多特性。
Loader可以分發(fā)出附加的任意文件。

loader使用

拿讀取css文件舉個(gè)栗子

安裝用來(lái)讀取css文件的css-loader
再用 style-loader 把它插入到頁(yè)面中。

在命令行中輸入：npm install css-loader style-loader --save-dev

然后檢查下你的 package.json 文件看看是否發(fā)生了一下的變化：

"devDependencies": {
    "css-loader": "^0.28.1",
    "style-loader": "^0.17.0",
    "webpack": "^2.5.1"
  }

接下來(lái)我們新建一個(gè)css文件命名為style.css,內(nèi)容為:

#app{
    color: red;
}

下面我們要對(duì)entry.js進(jìn)行一些添加修改：

require("!style-loader!css-loader!./style.css");

然后進(jìn)行編譯打包，命令號(hào)輸入：webpack entry.js bundle.js
完成之后刷新我們的頁(yè)面發(fā)現(xiàn)h1的標(biāo)題變成了紅色。

當(dāng)然了，如果覺得每次require css文件的時(shí)候都要寫loader和那么多的前綴！我們也可以采取以下這種方式：

require("./style.css")

在進(jìn)行編譯打包時(shí)候，命令行輸入以下：webpack entry.js bundle.js --module-bind "css=style-loader!css-loader"