loader接收資源文件源代碼作為參數(shù)辑舷，并返回新的代碼范嘱。比如茵乱，可以通過(guò)jsx-loader將React的JSX代碼轉(zhuǎn)換為JS代碼尸昧，從而被瀏覽器執(zhí)行餐济。
以前端開(kāi)發(fā)的CSS為例虐秋，為了將CSS資源添加到項(xiàng)目中邑时，通常需要使用style-loader與css-loader咐蝇。
style-loader：將CSS代碼以<style>標(biāo)簽的形式插入到頁(yè)面狐胎；
css-loader：通過(guò)檢查CSS代碼中的import語(yǔ)句找到依賴并合并鸭栖；
- 首先在應(yīng)用目錄下生成package.json
npm init
- 安裝loader對(duì)應(yīng)的npm包：
npm install style-loader css-loader --save-dev
- 創(chuàng)建一個(gè)簡(jiǎn)單的CSS文件，index.css：
div {
width: 100px;
height: 100px;
background-color: red;
}
- 創(chuàng)建入口文件握巢，index.js：
require('style-loader!css-loader!./index.css');
document.body.appendChild(document.createElement('div')); // 創(chuàng)建一個(gè)div晕鹊，用以驗(yàn)證css是否生效
類似×××-loader!這樣的寫法是為了告訴webpack使用特定的loader對(duì)index.css的內(nèi)容進(jìn)行處理
webpack ./index.js bundle.js
瀏覽器中可以成功看到紅色背景的div效果。
與常規(guī)的前端不同暴浦，最終頁(yè)面并沒(méi)有插入<link>標(biāo)簽溅话，結(jié)果文件中也沒(méi)有CSS文件，卻通過(guò)引入一個(gè)JS文件實(shí)現(xiàn)了樣式的引入歌焦。這正是webpack的特點(diǎn)之一飞几，任何類型的模塊（資源文件），理論上都可以通過(guò)被轉(zhuǎn)化為JavaScript代碼實(shí)現(xiàn)與其他模塊的合并與加載独撇。
這里通過(guò)JavaScript加載CSS正是借助了style-loader的能力（將CSS代碼以<style>標(biāo)簽的形式插入到頁(yè)面循狰，標(biāo)簽內(nèi)容通過(guò)JavaScript生成）。不過(guò)存在著樣式內(nèi)容生效時(shí)間被延后的缺點(diǎn)券勺。
如果遵循前端頁(yè)面優(yōu)化建議绪钥，一般<link>插在頁(yè)面的<head>中，而把<script>放在<body>最后」亓叮現(xiàn)在的做法中程腹，樣式內(nèi)容其實(shí)與JavaScript一起加載的，它的插入與解析會(huì)被延遲到JavaScript內(nèi)容的執(zhí)行期儒拂。相比前者寸潦，生效時(shí)間不可避免地會(huì)晚很多色鸳，因而如果頁(yè)面上有內(nèi)容，這部分內(nèi)容會(huì)有個(gè)短暫的無(wú)樣式瞬間见转，用戶體驗(yàn)不好命雀。
這個(gè)缺點(diǎn)可以借助extract-text-webpack-plugin插件解決，在打包時(shí)將樣式內(nèi)容抽取并輸出到額外的CSS文件中斩箫，然后在頁(yè)面中直接引入結(jié)果CSS文件吏砂。
