webpack（四）

loader

webpack只能处理js模块，如果要处理其它类型的文件，需要使用loader进行转换，loader就是将一段代码转换成另外一段代码的webpack加载器。

//loader就是一个函数
function loader(source){
	return source; 
}
module.export = loader;

loader别名

resolveLoaer:{
    modules: ['node_modules', path.resolve(__dirname, 'loaders', 'loader1.js')],
     // 如果node_modules找不到就去该路径下去找
	alias: {
    	loader1: path.resolve(__dirname, 'loaders', 'loader1.js')
    }
}

loader的分类 pre、post、normal
loader的顺序 pre + normal + inline + post
-!禁用前置和正常loader !禁用普通loader !!禁用前置和后置和正常loader

let str = require('!!inline-loader!./a.js');

//loader默认是由两部分组成
pitchloader normalloader

babel-loader

rules:[
	{
    	test: /\.js$/,
        use:{
        	loader: 'babel-loader',
            options: {
            	preset: [
                	'@babel/preset-env'
                ]
            }
        }
    }
]

let babel = require('@babel/core');
let loaderUtils = require('loader-untils');
//loader就是一个函数
function loader(source){
    let options = loaderUtils.getOptions();
    let cb = this.async(); //异步
    babel.transform(source,{
    	...options,
        sourceMap: true，
        filename: this.resourcePath.split('/').pop() // 文件名
    },function(err, result){
      cb(err, result.code, result.map); //异步
    }
    );
}

banner-loader

{
    	test: /\.js$/,
        use:{
        	loader: 'banner-loader',
            options: {
            	
            }
        }
    }

let babel = require('@babel/core');
let loaderUtils = require('loader-untils');
let validateOptions = require('schema-utils');
let cb = this.async(); //异步
//loader就是一个函数
function loader(source){
	this.cacheable(false); //表示不要缓存
    let options = loaderUtils.getOptions();
    let schema = {
       type: 'object',
       properties:{
       	text:{
        	type: 'string',
        },
        filename: {
        	type: 'string',
        }
       }
    }
    validateOptions(schema, options, 'banner-loader');
    if(options.filename){
    	this.addDependency(option.filename); //自动添加到文件依赖
    	fs.readFile(options.filename, 'utf8', function(err,data){
        	cb(err, `/**${data}**/${source}`)
        })
    }else{
        cb(null, errmsg)
    }
}

file-loader

let babel = require('@babel/core');
let loaderUtils = require('loader-untils');
function loader(source){
    filename = loaderUtils.interpolateName(this, '[hash].[ext]',{content: source});
    this.emitFile(filename, source);
    return source;
}
loader.raw = true;
module.exports = loader;

url-loader

let babel = require('@babel/core');
let loaderUtils = require('loader-untils');
let mime = require('mime');
function loader(source){
	let {limit} = loaderUtils.getOptions();
    if(limit && limit > source.length){
    	return `module.exports=data:image/jpeg;base64,${source.toString('base64')}`
    }else{
    	return require('./file-loader').call(this, source);
    }

}
loader.raw = true;
module.exports = loader;

style-loader css-loader less-loader

//css-loader
let less = require('less');
let loaderUtils = require('loader-untils');
function loader(source){
    let css;
    less.render(source, function(err,r){
    	css = r.css;
    });
    return css;

}
module.exports = loader;

//style-loader
function loader(source){
	let str = `
    	let style = document.createElement('style');
        style.innerHTML = ${JSON.stringify(source)};
        document.head.appendChild(style);
    `;
    return str;
}
module.exports = loader;

// css-loader
function loader(source){
	let reg = /url\((.+?)\)/g;
    let pos = 0;
    let current;
    let arr = ['let list = []'];
    while(current = reg.exec(source)){
    	let [matchUrl, g] = current;
        let last = reg.lastIndex - matchUrl.length;
        pos = reg.lastIndex;
        arr.push(`list.push(${JSON.stringify(source.slice(pos, last))})`);
        arr.push(`module.exports = list.join('')`);
    }
}