用webpack开发自己loader的前期准备

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

我们就实现一个简单的loader，编译我们自己定制的模版，然后渲染的正常的html上，这个和vue的vue-loader差不多，思路上差不多。

首先我们去要配置webpack没法用脚手架，只能自己配置这是我我的简单配置

const HtmlwebapckPlugin = require('html-webpack-plugin')
const path = require('path')


/***
 * 这里的选项只有 module没有介绍过其他的都介绍过 这里就不多介绍了
 * module rules主要是loader在用，说下执行顺序是从有到左执行，
 * 
 * **/
module.exports = {
    entry: path.resolve(__dirname,'./src/app.js'),
    output: {
        path: path.resolve(__dirname,'/dist'),
        filename: 'app.js'
    },
    resolveLoader: { // 我们在写自己的loader的时候这个配置比较重要，
    // 因为webpack默认是找node_modules里的，所有我们需要在后面配置自己本地loader文件夹里
    // 找
        modules: ["node_modules",path.resolve(__dirname,"loaders")]
    },
    module: {
      rules: [
        {
            test: /\.tpl$/,
            use: [
                "babel-loader",
               {
                loader: 'tpl-loader',
                options: {
                    log: true
                }
               }
            ]
        }
      ]
    },
    plugins: [
        new HtmlwebapckPlugin({ // 他还有需要配置大家可以自己看文档
            template: path.resolve(__dirname,'index.html') // 模板⽂件路径
        })
    ],
    devServer: {
        // prot: 8888
        open: true
    },

}

这里说的我们是把tpl模版转化为js，然后给了babel-loader，强调一下babel-loader和@babel-core是一起使用的，Babel是一个JavaScript编译器，如果想了解更多可以查看文档或自行百度

上面module 写的tpl-loader ，只要检测到tpl结尾的文件都会走tpl-loader，把模版转成js字符串,在使用babel-loader转化为咱们使用的js

看下我们tpl模版写法，其实和html模版一样

inde.tpl

<div>
    <h1>{{ name }}</h1>
    <h1>{{ age }}</h1>
    <h1>{{ sex }}</h1>
    <h1>{{ content }}</h1>
</div>

我们再看一下我们loader比较初步的写法

// 在这里咱们写的是node
function tplLoader(source) {
   // tpl最后导出的是一个函数 
  console.log(source)
  // 虽然到处的是js字符串，babel-laoder会帮做成一个可能执行的js程序 
  // 咱们自己做也可以用eval
  return `
    exprot default ()=>{}
  `
}
module.exports = tplLoader

app.js的写法

import tpl  from './into.tpl'
let app = document.getElementById('app')
const info = tpl({
    name: '小明',
    name: '34',
    sex:'44',
    content:'啊哈哈你好',
})

console.log(tpl)

我们上面配置完了 看下loader打印出来的source是什么

我们的laoder可以获取模版数了