介绍
vue-html-loader 是一个能够将 Vue 单文件组件中的 <template> 部分编译成 JavaScript 渲染函数的 webpack loader。它可以帮助开发者提升网页性能，减少首屏加载时间，也可使得搜索引擎更好地抓取内容。
安装
通过 npm 安装：
npm install vue-html-loader --save-dev
使用
在 webpack.config.js 中配置：
-- -------------------- ---- ------- -------------- - - ------- - ------ - - ----- --------- ------- ------------- -------- - -------- - ----- ----------------- - - -- -- --- - -- -- --- -展开代码
然后就可以在 Vue 单文件组件中使用了：
-- -------------------- ---- ------- ---------- ----- ----- ------- ------ ------ ----------- -------- ------ ------- - ------ - ------ - -------- ------- ------- - - - ---------展开代码
以上代码会被 vue-html-loader 转译成如下形式：
-- -------------------- ---- ------- ------ ------- - ---------- - ------ --------- -------- ------------------ -- ------ - ------ - -------- ------- ------- -- - --展开代码
参数
vue-html-loader 支持以下参数：
esModule：默认值为true。如果设置为false，则输出 CommonJS 模块。
-- -------------------- ---- ------- -------------- - - ------- - ------ - - ----- --------- ------- ------------- -------- - -------- - ----- -------------------------------- - - -- -- --- - -- -- --- -展开代码
whitespace：默认值为'condense'，可选值为'preserve'。如果设置为'preserve'，则保留 HTML 中的空白字符。
-- -------------------- ---- ------- -------------- - - ------- - ------ - - ----- --------- ------- ------------- -------- - -------- - ----- ------------------------------------- - - -- -- --- - -- -- --- -展开代码
深度和学习意义
在前端开发中，性能是一个非常重要的因素。网页加载速度快可以提升用户体验，也可以让搜索引擎更好地抓取内容，从而提升网站的 SEO。vue-html-loader 可以将 Vue 单文件组件中的模板部分编译成 JavaScript 渲染函数，从而减少首屏加载时间，提升性能。同时，学习使用 vue-html-loader 还可以加深理解 Vue 的运行原理。
示例代码
一个简单的示例代码如下：
-- -------------------- ---- ------- ---------- ----- ----- ------- ------ ------ ----------- -------- ------ ------- - ------ - ------ - -------- ------- ------- - - - ---------展开代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/43315
