为什么要使用 vue-template-loader？
如果你使用 vue-loader 来处理 .vue 文件，你可能会发现，你必须在 .vue 文件中的 template 标签内编写模板，或者使用 src 属性来引用外部的 HTML 文件。
这样做有一些缺点：
- 你不能直接在 HTML 文件中使用编辑器的语法高亮、格式化、代码提示等功能，而必须依赖于 vue-loader 的支持。
- 你不能直接在 HTML 文件中使用 webpack 的 loader，例如 html-loader、pug-loader 等，而必须在 vue-loader 的配置中指定它们。
- 你不能直接在 HTML 文件中使用 webpack 的插件，例如 html-webpack-plugin、mini-html-webpack-plugin 等，而必须在 vue-loader 的配置中指定它们。
vue-template-loader 可以解决这些问题，它可以让你直接使用 HTML 文件来编写 Vue 组件的模板部分，而不需要在 .vue 文件中引用它们。这样，你可以享受到 HTML 文件的所有优势
vue-template-loader 是如何工作的？
vue-template-loader 的工作原理是，它会将 HTML 文件中的内容转换为一个 Vue 组件的渲染函数，并导出它。这个渲染函数可以被 vue-loader 或其他方式引用，从而创建一个 Vue 组件。
Vue-template-loader 的工作流程可以分为以下几个步骤：
- 读取 HTML 文件的内容，使用 vue-template-compiler 将其转换为一个抽象语法树 (AST)。
- 遍历 AST，将其中的元素、属性、文本、表达式等转换为相应的渲染函数的代码片段。
- 将这些代码片段拼接成一个完整的渲染函数，并添加一些必要的辅助函数和变量。
- 将这个渲染函数导出为一个模块，可以被 vue-loader 或其他方式引用，从而创建一个 Vue 组件。
vue-template-loader 的配置
要使用 vue-template-loader，你需要在 webpack 的配置文件中添加一些设置。首先，你需要安装 vue-template-loader 和 vue-template-compiler 这两个 npm 包：
npm install -D vue-template-loader vue-template-compiler
然后，你需要在 webpack 的配置文件中添加一个名为 html 的规则，它会告诉 webpack 如何处理 .html 文件：
module.exports = {
// ...
module: {
rules: [
// ... 其他规则
{
test: /\.html$/,
loader: "vue-template-loader",
// 可选项
options: {
// 你可以在这里指定 vue-template-compiler 的选项
// 例如，你可以改变分隔符
delimiters: ["${", "}"],
// 你也可以在这里指定一个自定义的编译器
compiler: require("my-custom-compiler"),
},
},
],
},
};
最后，你需要在 .vue 文件中的 script 标签上添加一个 template 属性，它会指定要引用的 HTML 文件的路径：
<script template="./my-template.html">
export default {
data() {
return {
msg: "Hello world!",
};
},
};
</script>
这样，你就可以在 HTML 文件中编写 Vue 组件的模板部分，而不需要在 .vue 文件中引用它们。
vue-template-loader 的特性
vue-template-loader 还有一些其他的特性，例如：
- 支持热重载，即在修改 HTML 文件后，浏览器会自动刷新并保留当前的应用状态。
- 支持 source map，即在浏览器的开发者工具中，你可以看到 HTML 文件的源代码，而不是转换后的渲染函数。
- 支持自定义编译器，即你可以使用自己的编译器来处理 HTML 文件，而不是使用 vue-template-compiler。
