vue如何使用vue-loader

这篇文章主要介绍vue如何使用vue-loader，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

vue-loader小技巧

vue-loader 是处理 *.vue 文件的 webpack loader。它本身提供了丰富的 API，有些 API 很实用但很少被人熟知。例如接下来要介绍的 preserveWhitespace 和 transformToRequire

1 用 preserveWhitespace 减少文件体积

有些时候我们在写模板时不想让元素和元素之间有空格，可能会写成这样：

<ul>
 <li>1111</li><li>2222</li><li>333</li>
</ul>

当然还有其他方式，比如设置字体的 font-size: 0 ，然后给需要的内容单独设置字体大小，目的是为了去掉元素间的空格。其实我们完全可以通过配置 vue-loader 实现这一需求。

{
 vue: {
 preserveWhitespace: false
 }
}

它的作用是阻止元素间生成空白内容，在 Vue 模板编译后使用 _v(" ") 表示。如果项目中模板内容多的话，它们还是会占用一些文件体积的。例如 Element 配置该属性后，未压缩情况下文件体积减少了近 30Kb。

2 使用 transformToRequire 再也不用把图片写成变量了

以前在写 Vue 的时候经常会写到这样的代码：把图片提前 require 传给一个变量再传给组件。

<template>
 <div>
 <avatar :default-class="lazy" data-src="DEFAULT_AVATAR"></avatar>
 </div>
</template>
<script>
 export default {
 created () {
  this.DEFAULT_AVATAR = require('./assets/default-avatar.png')
 }
 }
</script>

其实通过配置 transformToRequire 后，就可以直接配置，这样vue-loader会把对应的属性自动 require 之后传给组件

{
 vue: {
 transformToRequire: {
  avatar: ['default-class="lazy" data-src']
 }
 }
}

于是我们代码就可以简化不少

<template>
 <div>
 <avatar default-class="lazy" data-src="./assets/default-avatar.png"></avatar>
 </div>
</template>

在 vue-cli 的 webpack 模板下，默认配置是：

transformToRequire: {
 video: ['class="lazy" data-src', 'poster'],
 source: 'class="lazy" data-src',
 img: 'class="lazy" data-src',
 image: 'xlink:href'
}

以上是“vue如何使用vue-loader”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网行业资讯频道！