Original link: github.com/vuejs/vue-l…

What the vue – loader

Vue-loader is a webpack loader that allows you to write vUE Components in a format called single-file Components

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world! '}}}</script>

<style>
.example {
  color: red;
}
</style>
Copy the code

There is vue-Loader that provides a lot of cool functionality

  • allowVueEach part of the component uses anotherwebpackLoader, for exampleSassloading<style>andPugloading<template>
  • allow.vueCustom blocks in a file that can be applied to a custom loader chain
  • The static<style>and<template>theassetsReferences are treated as module dependencies and are usedwebpackThe loader takes care of them
  • To simulate each componentCSSscope
  • Use hot loading to maintain state during development

In short, the combination of Vue-Loader and WebPack enables you to provide a modern, flexible and very powerful front-end workflow when writing vue.js applications

How does vue-loader work

Vue-loader is not a simple source converter. It processes each language block inside the SFC(single-file Component) with its own dedicated load chain (each block is a virtual module, you can think of it as), and eventually assembles these blocks into the final module. This is a brief overview of the process

  1. vue-loaderuse@vue/component-compiler-utilswillSFCSource code parsing intoSFCDescriptor, and then generate an import for each language block, the actual returned module code looks like this
// The code returned from the main loader source.vue

// import the <template> block
import render from 'source.vue? vue&type=template'

// import the <script> block
import script from 'source.vue? vue&type=script'
export * from 'source.vue? vue&type=script'

// import <style> blocks
import 'source.vue? vue&type=style&index=1'

script.render = render
export default script
Copy the code

Note that the code is imported from source.vue and each block has a different request query

  1. We want toscriptThe content is regarded as.jsFile (if yes<script lang="ts"We want to be seen.tsFile). The same is true for other language blocks. So we want Webpack to apply rules for any configured modules to match.jsIt also looks likesource.vue? vue&type=scriptThe request. This is theVueLoaderPlugin(src/plugin.ts)What it does: For each module rule in Webpack, it creates a modified clone relative to the Vue language block request

Assuming we have configured babel-loader for all *.js. These rules will also be copied and applied to 

import script from 'source.vue? vue&type=script'Copy the code

Will be extended to

import script from 'babel-loader! vue-loader! source.vue? vue&type=script'Copy the code

Note that vue-loader also matches because vue-loader is the file applied to. Vue. Similarly, if you configure style-loader+ CSs-loader +sass-loader for *. SCSS files

<style scoped lang="scss">
Copy the code

Will be returned via vue-loader

import 'source.vue? vue&type=style&index=1&scoped&lang=scss'Copy the code

Webpack will expand to

import 'style-loader! css-loader! sass-loader! vue-loader! source.vue? vue&type=style&index=1&scoped&lang=scss'Copy the code
  1. In the process of extending the request, mastervue-loaderWill be called again. But this time, the loader notices that the requests have queries and are specific to a particular block. So the choice (src/select.tsThe contents of the target block will pass the content that matches the loader
  2. For these<script>Block, that’s about it. But for<template>and<style>Some additional tasks need to be performed:
  • We need to compile the template using the Vue template compiler
  • We need to startcss-loaderAfter but in thestyle-loaderBefore,<style scoped>Block for CSS processing.

Technically, there are additional loaders (SRC/templateloader.ts and SRC /stylePostLoader.ts) that need to be injected into the extended loader chain. This can be complicated if the end user does not configure (the project), so the VueLoaderPlugin can also inject a global Pitching Loader(SRC /pitcher.ts) and listen for Vue

// <template lang="pug"> import 'vue-loader/template-loader! pug-loader! source.vue? vue&type=template' // <style scoped lang="scss"> import 'style-loader! vue-loader/style-post-loader! css-loader! sass-loader! vue-loader! source.vue? vue&type=style&index=1&scoped&lang=scss'Copy the code