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-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-src']
 }
 }
}

于是我們代碼就可以簡化不少

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

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

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

以上是“vue如何使用vue-loader”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！