步骤

1. 根目录新建 loaders 文件夹，创建 tpl-loader.js函数（loader就是个函数）
2. webpack 中配置 resolveLoader.module 让其除了从 node_modules 中找 loader 外，还能从我们创建的 loaders文件夹下找对应 loader
3. 还得在 webpack 中配置 rules ，当遇见 .tpl 文件时，用我们的 tpl-loader 解析
4. tpl-loader 其实就是个函数，会有个 source 参数，内容就是 tpl 文件中的源码
5. 我们要做的就是在函数中 return 一个字符串，不过字符串中的内容是导出一个函数（也就是 MyTitleView({})），最终交给 babel-loader 程序会给我们把字符串转为 JS 程序

• 核心点
  • loader 是个函数，有个 source 参数，内容就是 tpl 文件源码
  • 我们需要 tpl 最终返回的是个函数，接收一个对象（也就是组件）
    • 然后在手写的 loader 中做处理，给组件挂载 template
    • 最后返回这个组件
  • 最终把 loader 结果，也就是字符串函数，交给 babel-loader ，使其把字符串转为JS程序

tpl-loader

function tplLoader(source) {
  // webpack找到 .tpl 文件后，会找我们这个loader
  // 并把文件中的资源放到 source 变量 中来

  return `
    export default (component) => {
      component.template = \\`${source}\\`;
      return component;
    }
  `
}

使用

import './MyTitle.scss';
import  MyTitleView from './MyTitle.tpl';

export default MyTitleView({
  data() {
    return {
      title: 'This is my TITLE',
      subTitle: 'This is my SUB_TITLE'
    }
  },
  methods: {
    handleTitleClick(e) {
      console.log(e.target.innerText);
    }
  }
}, {
  template: true, // 开发时是否打印 template、data、methods
  data: true,
  methods: true
});

components/MyTitle

MyTitle.tpl

<div>
  <h1 @click="handleTitleClick($event)">{{ title }}</h1>
  <h2 @click="handleTitleClick($event)">{{ subTitle }}</h2>
</div>

MyTitle.scss

h1 {
  color: red;
}

h2 {
  color: purple;
}

index.js

import './MyTitle.scss';
import MyTitleView from './MyTitle.tpl';

export default MyTitleView({
  data() {
    return {
      title: 'This is my TITLE',
      subTitle: 'This is my SUB_TITLE'
    }
  },
  methods: {
    handleTitleClick(e) {
      console.log(e.target.innerText);
    }
  }
});

src/App.vue