webpack自定义loader全面详解

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

const LoaderUtils = require('loader-utils')
module.exports = function(content,map,mate){
   //   1. 获取参数
   var options = loaderUtils.getOptions(this) || {};    
   //   2. 是否使用ESM导出 
   const esModule = typeof options.esModule !== 'undefined' ? options.esModule : true; 
   //   3. 根据文件生成带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;

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

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. 获取参数
	var query = loaderUtils.getOptions(this) || {};
	// 2. 验证参数 - 当出现错误的时候会自动抛出错误 
	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;

// 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]')
            }
        },
        ]
    }
]
},