Webpack (4)

loader

Webpack can only process JS modules. If you want to process other types of files, you need to use loader for conversion. Loader is a WebPack loader that converts one piece of code into another.

Function loader(source){return source; } module.export = loader;Copy the code

Loader alias

resolveLoaer:{ modules: ['node_modules', path.resolve(__dirname, 'loaders', 'loader1.js')], // If node_modules cannot be found, go to alias: {loader1: path.resolve(__dirname, 'loaders', 'loader1.js') } }Copy the code

Pre + normal + inline + POST -! Disable pre and normal Loader! Disable normal Loader!! Disable the front and rear loaders and normal Loaders

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

// The default pitchLoader consists of two parts

babel-loader

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

let babel = require('@babel/core'); let loaderUtils = require('loader-untils'); Function loader(source){let options = loaderutils.getoptions (); let cb = this.async(); Babel.transform (source,{... Options, sourceMap: true, filename: This.resourcepath.split('/').pop() // file name},function(err, result){cb(err, result.code, result.map); // asynchronous}); }Copy the code

banner-loader

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

let babel = require('@babel/core'); let loaderUtils = require('loader-untils'); let validateOptions = require('schema-utils'); let cb = this.async(); Function loader(source){this.cacheable(false); 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); ReadFile (options.filename, 'utf8', function(err,data){cb(err, `/**${data}**/${source}`) }) }else{ cb(null, errmsg) } }Copy the code

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;

Copy the code

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;Copy the code

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('')`);
    }
}
Copy the code