webpack 做的事情，僅僅是分析出各種模塊的依賴關(guān)系撤逢，然后形成資源列表，最終打包生成到指定的文件中
更多的功能要借助 webpack loader 和 webpack plugins 完成
loader 本質(zhì)上是一個(gè)函數(shù)粮坞，作用是將某個(gè)源碼字符串轉(zhuǎn)換成另一個(gè)源碼字符串返回
在 webpack 的編譯過(guò)程中蚊荣，有一個(gè)步驟是：讀取文件內(nèi)容 --> 對(duì)文件內(nèi)容進(jìn)行語(yǔ)法分析 --> 生成 AST 抽象語(yǔ)法樹
也就是說(shuō)，webpack 是把文件當(dāng)作 js 代碼來(lái)處理的
但是有些時(shí)候莫杈，我們的文件內(nèi)容并不是符合 js 語(yǔ)法的互例，所以就沒(méi)有辦法進(jìn)行語(yǔ)法分析，也就不能進(jìn)行后續(xù)的編譯
這時(shí)候就需要 loader筝闹，通過(guò) loader 這個(gè)函數(shù)媳叨，可以對(duì) source code 進(jìn)行一個(gè)轉(zhuǎn)換，轉(zhuǎn)換成 webpack 可以進(jìn)行語(yǔ)法分析的代碼
如圖：
處理 loaders 的流程：
loaders 的配置：
module.exports = {
mode: "development",
module: {
rules: [// 模塊的匹配規(guī)則
// 每個(gè)規(guī)則就是一個(gè)對(duì)象
{
// 正則表達(dá)式关顷，匹配模塊的路徑
test: /index\.js/,
// 對(duì)于匹配的文件要使用哪些 loader
use: [
// 每個(gè)加載器的使用是一個(gè)對(duì)象
{
// 加載器的路徑
loader: "./loader/test-loader"
}
]
// 第二種寫法
// use: ["loader1", "loader2"]
},
],
// noParse 是否不要解析某些模塊
}
}
補(bǔ)充：option 里面的參數(shù)可以用 loader-utils 讀出來(lái)
注意：拿到已經(jīng)匹配好的 loaders 的數(shù)組之后是從后往前匹配的
