vue如何使用vue-loader

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

vue-loader小技巧

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

1 用 preserveWhitespace 减少文件体积

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

 
1111
2222
333

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

{ vue: { preserveWhitespace: false }}

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

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

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

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

{ vue: { transformToRequire: {  avatar: ['default-src'] } }}

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

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

transformToRequire: { video: ['src', 'poster'], source: 'src', img: 'src', image: 'xlink:href'}

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