webpack系列-loader

loader配置

loader是導出爲一個函數的node模塊。該函數在loader轉換資源的時候調用。給定的函數將調用loader API，並經過this上下文訪問。css

function loader(source){
        return source
    }
    loader.pitch = function(){
        console.log('pitch')
    }
    module.exports = loader
複製代碼

加載自定義loader的幾種方式

• 匹配單個loader（使用絕對路徑）

{
        test:/\.js$/,
        use:[
            loader:path.resolve('path/loaderjs'),
            options
        ]
    }
複製代碼

• alias

resolveLoader:{
        alias:{
            'loader1':path.resolve('path/loader1')
        }
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                use:[
                    loader:loader1,
                    options
                ]
            }
        ]
    }
複製代碼

• 配置多個loader

resolveLoader:{
        modules:[
            path.resolve('node_modules'), 
            path.resolve(__dirname, 'src', 'loaders')
        ]
    }
複製代碼

loader的分類

• 在前面 pre
• 正常 normal
• 在後面 post

loader的順序

pre => normal => inline => postnode

// index.js  加載順序爲 pre + normal + inline + post
    let str = require('inline-loader!./a.js')
    
    // index.js  加載順序爲 inline + post
    // -! 不會讓文件 再去經過pre+normal loader 來處理了
    // ! 沒有normal
    // !! 什麼都沒有 只有自身
    let str = require('-!inline-loader!./a.js')
    
複製代碼

loader的組成

loader執行首先會加載pitch-loader（書寫loader的順序），而後加載資源resource，最後執行normal-loader（正常加載loader的順序） 若是pitch-loader有返回值，則會跳事後面的加載，直接走到上一層的normal-loader裏面。數組

• pitch-loader
• normal-loader

loader的特色

• 最後加載的loader必須返回一個js腳本
• 每個loader都是一個模塊
• 每個loader都是無狀態的，確保loader在不一樣模塊轉換之間不保存狀態。

各類loader的實現

babel-loader

須要安裝@babel/core、@babel/preset-env瀏覽器

let babel = require('@babel/core');
    <!--loader 的工具庫-->
    let loaderUtils = require('loader-utils')
    function loader(source){
        <!--處理異步-->
        let cb = this.async();
        <!--this loaderContext-->
        let options = loaderUtils.getOptions(this);
        <!--babel 轉化源碼-->
        babel.transform(source,{
            ...options,
            sourceMap:true,
            filename:this.resourcePath.split('/').pop() // 文件名
        },function(err,result){
            cb(null,result.code,result.map)
        })
    }
    
    module.exports = loader
複製代碼

banner-loader

use:{
        loader:'banner-loader',
        options:{
            text:'xx',
            filename:path.resolve(__dirname,'banner.js')
        }
    }
複製代碼

let loaderUtils = require('loader-utils')
    let fs = require('fs')
    <!--驗證傳遞參數-->
    let validateOptions = require('schema-utils')
    function loader(source){
        <!--添加緩存-->
        this.cacheable && this.cacheable()
        let options = loaderUtils.getOptions(this)
        let cb = this.async();
        let schema = {
            type:'object',
            properties:{
                text:{
                    type:'string'
                },
                filename:{
                    type:'string'
                }
            }
        }
        validateOptions(schema,options,'banner-loader')
        if(options.filename){
            <!--添加監聽 當文件內容變化 自動打包-->
            this.addDependency(options.filename)
            fs.readFile(options.filename,'utf8',function(err,data){
                cb(err,`/**${data}**/${source}`)
            })
        }else{
            cb(null,`/**${options.text}**/${source}`)
        }
    }
    
    module.exports = loader
複製代碼

file-loader && url-loader

import p from './public.jpg'
    let img = document.createElement('img');
    img.src = p;
    document.body.appendChild(img)
複製代碼

file-loader緩存

• 現將圖片生成一個md5 發射到dist目錄下
• 而後返回當前圖片的路徑

// file-loader
    let loaderUtils = require('loader-utils')
    function loader(source){
        <!--生成md5文件-->
        let filename = loaderUtils.interpolateName(this,'[hash].[ext]',{content:source})
        this.emitFile(filename,source)
        return `module.exports = "${filename}"`
    }
    // 將source 轉化爲二進制buffer
    loader.raw = true 
    module.exports = loader
    
    
    // url-loader
    let loaderUtils = require('loader-utils')
    let mime = require('mime')
    function loader(source){
        let {limit} = loaderUtils.getOptions(this);
        if(limit && limit > source.length){
            return `module.exports = "data:${mime.getType(this.resourcePath)};base64,${source.toString('base64')}"`
        }else{
           return require('./file-loader').call(this,source) 
        }
    }
    loader.raw = true;
    module.exports  = loader;
    
複製代碼

less-loader && style-loader && css-loader

// less-loader
    let less = require('less')
    function loader(source){
        let css;
        less.render(source,function(err,r){
            css = r.css
        })
        // 交給css-loader處理
        return css; 
    }
    
    module.exports = loader
    
    // style-loader
    
    function loader(source){
        
    }
    loader.pitch = function(request){  // 這個request的就是當前路徑 沒有包含當前
      //  css-loader less-loader
      console.log(request);
      let script = `
        let style = document.createElement('style');
        <!--返回相對路徑  只執行行內loader-->
        style.innerHTML = require(${loaderUtils.stringifyRequest(this, '!!' + request)});
        document.head.appendChild(style);
      `
      // 返回的結果 會在瀏覽器中運行
      return script;
    
    }
    module.exports = loader
    
    
    // css-loader
    // css-loader的做用就是把全部url的內容 都變成require('文件名的形式')
    function loader(source) {
      let reg = /url\((.*?)\)/g;
      let current;
      let pos = 0;
      let arr = [`let lists = []`];
      while (current = reg.exec(source)) { //lastIndex
        // 數組類型 [匹配的字符串,分組中的內容]
        let [matchUrl, p] = current;
        let index = reg.lastIndex - matchUrl.length
        // lastIndex就是匹配結束的位置
        arr.push(`lists.push(${JSON.stringify(source.slice(pos, index))})`);
        arr.push(`lists.push("url("+require(${p})+")")`)
        pos = reg.lastIndex;
      }
      arr.push(`lists.push(${JSON.stringify(source.slice(pos))})`);
      arr.push(`module.exports = lists.join('')`);
      console.log(arr.join('\r\n'));
      return arr.join('\r\n');
    }
    module.exports = loader;
複製代碼