Shulou(Shulou.com)06/01 Report--

This article mainly introduces vue how to use vue-loader, the article is very detailed, has a certain reference value, interested friends must read it!

Vue-loader Tips

Vue-loader is the webpack loader that handles * .vue files. It itself provides a wealth of API, some of which are useful but rarely known. For example, preserveWhitespace and transformToRequire will be introduced next.

1 reduce file size with preserveWhitespace

Sometimes when we write a template, we don't want a space between the element. It might look like this:

11112222333

Of course, there are other ways, such as setting the font font-size: 0, and then setting the font size separately for the desired content, in order to remove the spaces between elements. In fact, we can achieve this requirement by configuring vue-loader.

{vue: {preserveWhitespace: false}}

Its purpose is to prevent blank content from being generated between elements, which is represented by _ v ("") after the Vue template is compiled. If there are a lot of templates in the project, they will still take up some file volume. For example, after Element configures this attribute, the file size is reduced by nearly 30Kb without compression.

2 using transformToRequire, you no longer have to write pictures as variables.

In the past, when writing Vue, we used to write code like this: require the picture in advance to a variable and then pass it to the component.

Export default {created () {this.DEFAULT_AVATAR = require ('. / assets/default-avatar.png')}}

In fact, after configuring transformToRequire, you can configure it directly, so that vue-loader will automatically require the corresponding properties and pass them to the component.

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

So our code can be simplified a lot.

Under the webpack template of vue-cli, the default configuration is:

TransformToRequire: {video: ['src',' poster'], source: 'src', img:' src', image: 'xlink:href'} these are all the contents of the article "how vue uses vue-loader". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.