學習webpack loader，最后模擬style-loader、less-loader

什么是loader

• loader是一個函數，用來把文件轉換成webpack識別的模塊。

loader API

• this.callback，一個可以同步或者異步調用的可以返回多個結果的函數。
• this.async，異步的loader，返回this.callback

如何編寫loader

設置

• webpack默認從node_modules里找loader
• 直接引入loader

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

• 如果有多個loader的目錄，可以設置loader的目錄，webpack會從設置的目錄里找到loader

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

簡單用法

• 當使用一個loader時，這個loader函數只有一個參數，參數是包含文件內容的字符串。
• 同步loader可以返回一個代表模塊轉化后的簡單的值
• loader的返回值是javascript代碼字符串或者是Buffer

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

復雜用法

• 當配置多個loader時，loader的執行順序時從右往左，右邊的執行結果作為參數傳到左邊。
• less-loader把less轉化成css，傳給css-loader，css-loader把結果給style-loader，style-loader返回javascript代碼字符串。

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

編寫原則

• 單一職責。每個loader只負責一件事情。
• 使用鏈式調用，確保loader的依賴關系的正確。
• 無狀態性，確保loader在不同模塊轉換之間不保存狀態。每次運行都應該獨立于其他編譯模塊以及相同模塊之前的編譯結果。

loader工具庫

• loader-utils，可以獲取loader的options
• schema-utils，校驗loader的options的合法性

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

• less-loader負責把less編譯成css

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

• css-loader負責把css交給下一個loader

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

• style-loader把css添加到style標簽里

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

• 雖然每個loader功能簡單，但是loader之前職責單一，方便擴展。

總結

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

參考

• 源碼
• 編寫一個loader
• webpack-loader api
• loader-utils
• schema-utils

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。