webpack自定義loader全面詳解

更新時間：2023年01月04日 10:57:19 作者：摸魚的湯姆

這篇文章主要為大家介紹了webpack自定義loader全面詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

什么是loader?

因為webpack不識別非js結尾的文件，所以需要借助loader來告訴webpack如何對這些文件進行處理和輸出的 loader都有哪些類型

loader類型

loader在webpack 中有四種loader:

pre(前置)
normal（普通）
inline（行內）
post（后置）

loader的執(zhí)行順序：pre>normal>inline>loader

如何指定loader類型

在webpack中通過Rule.enforce來指定loader的類型

{
test: /\.less$/,
use: 'less-loader',
enforce: 'pre'
}

如果沒有enforce就會指定為普通的loader

如何禁用一些loader？

比如說一個eslint-loader,有的的開發(fā)者可能使用不了，但是不能干擾到其他同事，可以選擇直接禁用它

require('!inline-loader!./a.js') 使用 ! 禁用配置文件中的普通loader

require('-!inline-loader!./a.js') 使用-！禁用所有的前置和普通loader

require('!!inline-loader!./a.js') 使用!! 禁用所有的后置和普通loader

下面開始直奔主題，開始說說url-loader和file-loader

為什么要用url-loader和file-loader？

url-loader和file-loader在webpack中是最常用的兩個loaderl了，首先這兩個loader存在一個相同點，上面已經提到webpack不能處理像css,scss,less,jpg,svg或者是其他文件格式的資源，這個時候就需要借助這兩個loader其中一個去處理。

下面說一下這兩個loader的區(qū)別

相同點：這兩個loader都是用來處理在webpack編譯的時候不能識別的文件格式

不同點：url-loader會在特定的條件下將資源輸出為base64編碼格式，為什么說在特定條件下，用過此loader的人都知道有一個limit的配置,通過這個配置來識別文件以哪種格式輸出，并且在他內部也引用了file-loader,file-loader就是講webpack不能識別的文件進行編譯，并輸出到指定的目錄，url-loader就相當于對file-loader進行了二次封裝,所以現(xiàn)在還是url-loader用的比較多一些。

開發(fā)自定義兩個loader,并分別實現(xiàn)url-loader和file-loader

在編寫源碼之前需要安裝三個依賴，分別是：

loader-utils loader的工具庫
mime 文件類型匹配
schema-utils 驗證loader參數(shù)

file-loader

創(chuàng)建文件loader/file-loader.js

const LoaderUtils = require('loader-utils')
module.exports = function(content,map,mate){
   //   1. 獲取參數(shù)
   var options = loaderUtils.getOptions(this) || {};    
   //   2. 是否使用ESM導出 
   const esModule = typeof options.esModule !== 'undefined' ? options.esModule : true; 
   //   3. 根據(jù)文件生成帶hash值文件名
   const publicPath = LoaderUtils.interpolateName(this,"[hash].[ext][query]",content);
   //   4. 將文件輸出出去
   this.emitFile(publicPath,content)
   //   5. export 文件名
   return `${esModule ? 'export default' : 'module.exports ='}${publicPath}`;  
}
// 需要處理 文件 ，圖片等文件格式都是 buffer格式的 需要使用rawloader才能處理
module.exports.raw = true;

url-loader

創(chuàng)建文件loader/option.json

{
    "type":"object",
    "properties":{
         "limit":{
             "type":["string","number"]
         },
         "mimeType":{
              "type":"string"
         },
         "esModule":{
            "type":"boolean"
       } 
    }
}

創(chuàng)建文件loader/url-loader.js

var loaderUtils = require("loader-utils");
var mime = require("mime");
var validate = require("schema-utils"); 
var schema = require('./option.json');
function shouldTransform(limit, size){
	if (typeof limit === 'boolean') {
	  return limit;
	}
	if (typeof limit === 'string') {
	  return size <= parseInt(limit, 10);
	}
	if (typeof limit === 'number') {
	  return size <= limit;
	}
	return true;
  }
module.exports = function(content) {  
	// 1. 獲取參數(shù)
	var query = loaderUtils.getOptions(this) || {};
	// 2. 驗證參數(shù) - 當出現(xiàn)錯誤的時候會自動拋出錯誤 
	validate(schema, query,{name:'url-loader'});
	// 3. 文件大小限制
	var limit = (this.options && this.options.url && this.options.url.dataUrlLimit) || 0;
	// 2.0+版本以后新增的esModuleApi
	let esModule = query.esModule 
	// 類型
	var mimetype = query.mimetype || query.minetype || mime.lookup(this.resourcePath);
	// 通過文件大小
	if(shouldTransform(query.limit,content.length)){
	// 如果比較文件小于limit 以base64的形式去展示 
		return `${esModule ? 'export default' : 'module.exports ='}` + JSON.stringify("data:" + (mimetype ? mimetype + ";" : "") + "base64," + content.toString("base64"));
	} else {
    // 這里引入我們自己的file-loader 
	// 如果比較文件大于limit，以url的形式展示
		var fileLoader = require("./file-loader.js");
		return fileLoader.call(this, content);
	}
}
module.exports.raw = true;

如何測試使用

在loader統(tǒng)計目錄下創(chuàng)建webpack.config.js,只需要驗證url-loader就可以了，因為內部已經有file-loader的導入

// webpack.config.js 中
{
oneOf:[
    {
        test:/\.js$/,
        use:[
        {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: './loader/url-loader.js', 
            exclude: [resolve('src/icons')],
            options: {
            limit: 10000,
            // 名稱
            name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
        },
        ]
    }
]
},

本篇文章主要介紹loader的基礎知識和如何去開發(fā)自定義loader,并介紹了兩個常用的loaderurl-loader和file-loader,也進行了基本的實現(xiàn)，通過本片文章希望你能對webpack的loader的使用以及開發(fā)有一個基本的認識，更多關于webpack自定義loader的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: