用webpack开发自定义组件的最终实现

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

在 webpack自定义loader的逻辑写法我们已经写好了，我们也可以正常解析模版了，模版可以正常渲染到html上。看下截图

我们来看下项目结构吧

app.js的截图我们把tpl模版编译完的html直接追加到了body上

如果看过 用webpack的loader定义一个自己模版 （上）这边文章的应该还记得 我们在配置laoder的时候还配置了options,里面有个log:ture的属性，我们怎么能拿到tpl-loader的配置呢，这个就需要借助laoder-utils的这个依赖，这个依赖不用我们单独下，这个webpack是自带，

tpl-lader.js这个js全部就不写了，只写怎么引用，怎么使用后面会有截图

// 直接引入laoder 结构出getOptions这个方法
const { getOptions } = require('loader-utils')

// 使用的话就直接把当前this穿进去 这个就可以直接打印出来配置 
  console.log(getOptions(this))

我们可以试着把配置写到程序里，当然还是需要写成字符串，

  // 开始写配置
  let logText = log.log?`console.log('我会打印出数据了+${source}')`:`console.log('我是flase')`;
 //  把logText 需要写到模版字符串里
    return `
        export default (options)=>{
           ${replacetlp.toString()}
           ${logText.toString()}
           return replacetlp('${source}',options)
        }
  `

字符串js不算太好些，尤其是引号问题，大家可以尝试一下，我已经写好了请看打印出的数据

大家也可以看下新的loader的截图

大家可以找一些其他的简单的laoder来练练手，多写一写，熟悉了，写自己项目的匹配的loader的时间就不远了，期待大家升职加薪