學(xué)習(xí)webpack loader，最后模擬style-loader、less-loader

什么是loader

• loader是一個(gè)函數(shù)，用來把文件轉(zhuǎn)換成webpack識(shí)別的模塊。

loader API

• this.callback，一個(gè)可以同步或者異步調(diào)用的可以返回多個(gè)結(jié)果的函數(shù)。
• this.async，異步的loader，返回this.callback

如何編寫loader

設(shè)置

• webpack默認(rèn)從node_modules里找loader
• 直接引入loader

{test: /\.js$/use: [{loader: path.resolve('path/to/loader.js'),options: {/* ... */}}] } 復(fù)制代碼

• 如果有多個(gè)loader的目錄，可以設(shè)置loader的目錄，webpack會(huì)從設(shè)置的目錄里找到loader

resolveLoader: {modules: ['node_modules',path.resolve(__dirname, 'loaders') //自己開發(fā)的loaders] } 復(fù)制代碼

簡單用法

• 當(dāng)使用一個(gè)loader時(shí)，這個(gè)loader函數(shù)只有一個(gè)參數(shù)，參數(shù)是包含文件內(nèi)容的字符串。
• 同步loader可以返回一個(gè)代表模塊轉(zhuǎn)化后的簡單的值
• loader的返回值是javascript代碼字符串或者是Buffer

//css-loader 把css解析成webpack識(shí)別的模塊 module.exports = function(source) {return `module.exports=${source}`; } 復(fù)制代碼

復(fù)雜用法

• 當(dāng)配置多個(gè)loader時(shí)，loader的執(zhí)行順序時(shí)從右往左，右邊的執(zhí)行結(jié)果作為參數(shù)傳到左邊。
• less-loader把less轉(zhuǎn)化成css，傳給css-loader，css-loader把結(jié)果給style-loader，style-loader返回javascript代碼字符串。

{test:/\.less$/,use:['style-loader','css-loader','less-loader'] } 復(fù)制代碼

編寫原則

• 單一職責(zé)。每個(gè)loader只負(fù)責(zé)一件事情。
• 使用鏈?zhǔn)秸{(diào)用，確保loader的依賴關(guān)系的正確。
• 無狀態(tài)性，確保loader在不同模塊轉(zhuǎn)換之間不保存狀態(tài)。每次運(yùn)行都應(yīng)該獨(dú)立于其他編譯模塊以及相同模塊之前的編譯結(jié)果。

loader工具庫

• loader-utils，可以獲取loader的options
• schema-utils，校驗(yàn)loader的options的合法性

模擬less-loader、css-loader、style-loader

• less-loader負(fù)責(zé)把less編譯成css

const less = require('less'); module.exports = function (source) {less.render(source, (e, output)=>{this.callback(e,output.css); //把編譯后的css返回給下一個(gè)loader}); };復(fù)制代碼

• css-loader負(fù)責(zé)把css交給下一個(gè)loader

module.exports = function (source) {return source; //source是上個(gè)loader的返回值，如果沒有上一個(gè)loader，則是css的內(nèi)容 }; 復(fù)制代碼

• style-loader把css添加到style標(biāo)簽里

module.exports = function (source) {return `const e = document.createElement('style');e.innerHTML = ${JSON.stringify(source)};document.head.appendChild(e);`; }; 復(fù)制代碼

• 雖然每個(gè)loader功能簡單，但是loader之前職責(zé)單一，方便擴(kuò)展。

總結(jié)

webpack loader的功能遠(yuǎn)不止這些，本文算是編寫loader的"套路"入門篇。

參考

• 源碼
• 編寫一個(gè)loader
• webpack-loader api
• loader-utils
• schema-utils

總結(jié)

以上是生活随笔為你收集整理的webpack loader的套路的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。