正值前端組件化開發(fā)時(shí)代踪央，那么必然離不開目前最火的構(gòu)建工具——webpack（grunt，gulp等暫且不談）。說(shuō)到這里，剛好有幾個(gè)問(wèn)題：

• 為什么運(yùn)行打包命令之后忌卤，.vue 文件可以轉(zhuǎn)成 .js 文件
• 為什么運(yùn)行打包命令之后，.less 文件可以轉(zhuǎn)成 .css 文件
• 為什么運(yùn)行打包命令之后楞泼，ES6+ 語(yǔ)法可以轉(zhuǎn)成 ES5 語(yǔ)法

上面這幾個(gè)問(wèn)題驰徊，就引出了我們的主角——【loader】。
loader 是 webpack 的一塊很重要的組成部分堕阔。我們都知道 webpack 是用于資源打包的棍厂，里面的所有資源都是“模塊”，內(nèi)部實(shí)現(xiàn)了對(duì)模塊資源進(jìn)行加載的機(jī)制超陆。但是 Webpack 本身只能處理 js 模塊牺弹，如果要處理其他類型的文件，就需要使用 loader 進(jìn)行轉(zhuǎn)換。 Loader 可以理解為是模塊和資源的轉(zhuǎn)換器张漂，它本身是一個(gè)函數(shù)晶默，接收文件源碼作為參數(shù)，返回轉(zhuǎn)換的結(jié)果航攒，例如可以使用 loader 加載器可以快速編譯預(yù)處理器 (less,sass,coffeeScript)磺陡。Loader 可以在 require() 引用模塊的時(shí)候添加，也可以在 webpack 全局配置中進(jìn)行綁定屎债，還可以通過(guò)命令行的方式使用仅政。（本篇中的參數(shù)配置及使用方式均基于 webpack4.0 版本）

一、loader的特點(diǎn)

1盆驹、loader 的執(zhí)行順序和代碼書寫的順序是相反的圆丹，即：從下至上，從右至左躯喇。
2辫封、第一個(gè)執(zhí)行的 loader 會(huì)接收源文件做為參數(shù)，下一次執(zhí)行的 loader 會(huì)接收前一個(gè) loader 執(zhí)行的返回值做為參數(shù)
3廉丽、需要嚴(yán)格遵循“單一職責(zé)”原則倦微，即每個(gè) loader 只負(fù)責(zé)自己需要負(fù)責(zé)的事情

二、loader API

更多詳細(xì)API偏塞，以及各API的用法示例唱蒸，可以訪問(wèn)官網(wǎng)查看。地址：https://www.webpackjs.com/api/loaders

三灸叼、寫loader之前的需求整理

現(xiàn)在有這樣一個(gè)需求神汹，使用 hxkj-loader 加載并處理名稱為 *.hxkj.vip 的文件，將里面的哈瞎沤瘢空間全部替換為 www.hxkj.vip屁魏。需要實(shí)現(xiàn)的轉(zhuǎn)換如下：

轉(zhuǎn)換前的內(nèi)容：

<div>
    <h1>歡迎訪問(wèn)哈希空間</h1>
    <p>哎喲捉腥，終于等到你氓拼。這里就是讓人流連忘返的哈希空間呀抵碟！</p>
</div>

轉(zhuǎn)換后的內(nèi)容：

<div>
    <h1>歡迎訪問(wèn)www.hxkj.vip</h1>
    <p>哎喲披诗，終于等到你。這里就是讓人流連忘返的www.hxkj.vip呀立磁！</p>
</div>

四、編寫loader

在與 webpack.config.js 同級(jí)目錄下新建 hxkj-loader.js剥槐，文件的內(nèi)容如下：

module.exports = function(source){
    var content="";
    content = source.replace("/哈铣纾空間/g","www.hxkj.vip");
    return content; 
}

接下來(lái)，需要在 webpack.config.js 文件中增加以下的配置:

const path = require("path"); // 引入 node 的 path 模塊
...
module:{
    rules:[{
        test: /\.hxkj\.vip$/, // 正則匹配以 hxkj.vip 結(jié)尾的文件
        use:[{
            loader:path.resolve(__dirname, "hxkj-loader") // 使用 path 模塊找到 hxkj-loader 的路徑
        }]
    }]
}

好粒竖，到此颅崩，一個(gè)簡(jiǎn)易版的 loader 就已經(jīng)寫完了。目前 loader 是直接寫在本地的蕊苗，可以考慮將自己寫好的 loader 發(fā)布到 npm沿后，這樣就更加完善了。

At last朽砰，看完之后有什么不懂的尖滚，可以留言反饋喉刘。

轉(zhuǎn)載請(qǐng)注明出處：http://www.reibang.com/p/51b793f6fa0e
作者：TSY
個(gè)人空間：https://hxkj.vip