webpack自定义loader的逻辑写法

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第10天，点击查看活动详情

我们在上一篇文章 用webpack开发自己loader的前期准备已经配置好了webpack,写的loader也已经可以获取模版信息了，我们就要进行下一步了。

其实vue-laoder的原理和这个差不多，也是首先获取模版信息，然后对其html，css，js分别作处理，他做比较复杂

上一篇文章我们拿出来的模板要对其进行去空格处理，去空格比较简单看下代码，我们这里就不写全部了，后面放上

  source = source.replace(/\s+/g,'') // 去空格

后面就需要我们需要写一个js模版替换的预演了，因为我们loader返回的是字符串js，真正的执行需要给babel，所以比较麻烦，我们要提前写好，执行正常，这样才会节省时间成本下面我们看一下

我们需要把模版的name变量换成 tlp传进去的值

const info = tpl({
    name: '小明',
    name: '34',
    sex:'44',
    content:'啊哈哈你好',
})
<div><h1>{{name}}</h1><h1>{{age}}</h1><h1>{{sex}}</h1><h1>{{content}}</h1></div>

function tpl(options) { // 这是预演的函数
   function replacetlp(template,options) { // 传进来模版和optipns
    // 这里最麻烦的就是正则了 我们需要找到{{}}里的值进行替换
    return template.replace(/\{\{(.*?)\}\}/g,(node,key)=>{
       return options[key]
    })
   }
   return replacetlp(template,options) // 最终renturn出去的
}

我们在loader返回的函数其实一定是个字符串 replacetlp函数是个工具函数我们会把它抽离出 我们看字js字符串的写法

function tplLoader(source) {
   // tpl最后导出的是一个函数 
   // souce其实就是源码，和vue模版的原理其实差不多vue也是拿到模版源码 对其进行操作，大多数也是正则，去区分
  // 虽然到处的是js字符串，babel-laoder会帮做成一个可能执行的js程序 
  // 咱们自己做也可以用eval
  // 我们需要把source里的空格和换行去掉
  source = source.replace(/\s+/g,'')
  console.log(source) 
  // 这里我们要拼接函数了
  // 把函数转字符串
  return `
    export default (options)=>{
       ${replacetlp.toString()}
       return replacetlp('${source}',options)
    }
  `
}
function replacetlp(template,options) { // 传进来模版和optipns
      // 这里最麻烦的就是正则了 我们需要找到{{}}里的值进行替换
      return template.replace(/\{\{(.*?)\}\}/g,(node,key)=>{
         return options[key]
      })
     }

module.exports = tplLoader

后面更精彩 用webpack开发自定义组件的最终实现