完成一个转换template的webpack-loader：JetLoader

完成一个转换template的webpack-loader：JetLoader

---

目标

传递一个对象，根据 key 注入将其转换为对应的 html，并且支持实时 log 转换的 template 的文件名、可配置的首字母大写转换

import tpl from "./info.tpl";

const info = tpl({
   
  name: "jet",
  age: 34,
  career: "前端实习生",
  hobby: "game/篮球",
}); 

const root = document.querySelector("#root");
root.innerHTML = info;

<div>
    <h1> {
  { name }} </h1>
    <p> {
  { age }} </p>
    <p> {
  { career }} </p>
    <p> {
  { hobby }} </p>
</div>

webpack-config配置tpl文件的loader

module: {
    rules: [
      {
        test: /\.tpl$/,
        use: [
          {
            loader: "./loaders/jet-tpl",
            options: {
              log: true,
              Uppercase: true,
            },
          },
        ],
      },
    ],
  },

• 匹配 tpl 后缀的文件，使用本地目录下的 loader 文件进行处理
• 配置 log 实时输出处理文件信息， Uppercase 自动转换首字母大写

编写loader