在上篇博客中我們通過(guò)webpack將first.js和entry.js兩個(gè)文件打包成了bundle.js，除此之外還可以通過(guò)引入其他的loader，處理各種類(lèi)型的文件辆布。
loader的介紹
Loader可以理解為是模塊和資源的轉(zhuǎn)換器瞬矩，它本身是一個(gè)函數(shù)，接受源文件作為參數(shù)锋玲，返回轉(zhuǎn)換的結(jié)果景用。這樣，我們就可以通過(guò)require來(lái)加載任何類(lèi)型的模塊或文件嫩絮，比如VUE丛肢、JSX围肥、SASS 或圖片剿干。
loader的特性：
- Loader可以通過(guò)管道方式鏈?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可以通過(guò)文件擴(kuò)展名（或正則表達(dá)式）綁定給不同類(lèi)型的文件谬盐。
- Loader可以通過(guò)npm發(fā)布和安裝。
- 除了通過(guò)package.json的main指定诚些，通常的模塊也可以導(dǎo)出一個(gè)loader來(lái)使用飞傀。
- Loader可以訪問(wèn)配置。
- 插件可以讓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)然了，如果覺(jué)得每次require css文件的時(shí)候都要寫(xiě)loader和那么多的前綴家破！我們也可以采取以下這種方式：
require("./style.css")
在進(jìn)行編譯打包時(shí)候颜说，命令行輸入以下：webpack entry.js bundle.js --module-bind "css=style-loader!css-loader"
