【Vuejs】509- vue-loader工做原理

github.com/vuejs/vue-loader#how-it-works

什麼vue-loader

vue-loader是用於webpack的加載器，容許你用叫作Single-File Components單文件組件的格式來寫Vue組件

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


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


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

這裏有vue-loader提供許多炫酷的功能

• 容許Vue組件的每一個部分使用其它的webpack加載器，好比Sass加載<style>和Pug加載<template>

• 容許.vue文件中的自定義塊，這些(自定義塊)可以運用於定製的加載程序鏈

• 將靜態的<style>和<template>的assets引用視爲模塊依賴，而且用webpack加載程序去處理他們

• 模擬每一個組件的CSS做用域

• 在開發的過程當中使用熱加載保持狀態

簡而言之，vue-loader和webpack的組合可以使你在寫Vue.js應用時，提供現代化、靈活的和功能很是強大的前端工做流

vue-loader是怎麼工做

vue-loader不是簡單的源轉換器。它用本身專用的加載鏈（你能夠認爲每一個塊是虛擬的模塊）處理SFC(Single-file Component 單文件組件)內部的每一個語言塊，最後將這些塊組成最終的模塊。這是整個過程的簡要概述

1. vue-loader使用@vue/component-compiler-utils將SFC源碼解析成SFC描述符,而後爲每一個語言塊生成一個導入，實際返回的模塊代碼看起來像這樣

// 從主加載程序返回的代碼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

注意這些代碼是從source.vue導入的，每一個塊都有不一樣的請求查詢

1. 咱們想要script的內容被視爲.js文件（若是是<script lang="ts"，咱們想要被視爲.ts文件）。其餘的語言塊也是一樣的。因此咱們想要webpack 申請任何已配置模塊的規則去匹配.js，也看起來像source.vue?vue&type=script的請求。這就是VueLoaderPlugin(src/plugin.ts)做用：對於webpack的每一個模塊規則，它建立一個相對於Vue語言塊請求的修改後的克隆

假設咱們爲全部的*.js配置過babel-loader.這些規則也同樣會複製和應用於到Vue SFC的<script>塊中，內部到webpack，一個像這樣的請求

import script from 'source.vue?vue&type=script'

將擴展爲

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

注意是vue-loader 也會匹配，由於vue-loader是應用於.vue的文件。一樣地，若是你爲*.scss文件配置了style-loader+css-loader+sass-loader

<style scoped lang="scss">

將經過vue-loader返回

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

webpack將會擴展成

import 'style-loader!css-loader!sass-loader!vue-loader!source.vue?vue&type=style&index=1&scoped&lang=scss'

1. 在擴展請求的過程當中，主vue-loader將再次被調用。可是此次，加載器注意到這些請求有查詢而且只針對於特定塊。因此選擇（src/select.ts）目標塊的內容將傳遞與加載器匹配的內容

2. 對於這些<script>塊，這就差很少了。可是對於<template>和<style>，一些額外的任務須要被執行：

• 咱們須要使用Vue模板編譯器編譯模板

• 咱們須要在css-loader以後可是在style-loader以前，爲<style scoped>塊進行CSS處理。

從技術上來看，這裏有額外的加載器（src/templateLoader.ts 和 src/stylePostLoader.ts）須要注入到擴展的加載程序鏈。若是終端用戶不去配置（項目），這將會很複雜，因此VueLoaderPlugin也能夠注入到一個全局Pitching Loader(src/pitcher.ts)而且監聽Vue<template>和<style>請求,注入必要的加載器中。最終的請求像下面這樣：

// <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'

▼

原創系列推薦

▼

1. JavaScript 重溫系列（22篇全）

2. ECMAScript 重溫系列（10篇全）

3. JavaScript設計模式 重溫系列（9篇全）

4. 正則 / 框架 / 算法等 重溫系列（16篇全）

5. Webpack4 入門（上）|| Webpack4 入門（下）

6. MobX 入門（上） ||  MobX 入門（下）

7. 59篇原創系列彙總

回覆「加羣」與大佬們一塊兒交流學習~

點這，與你們一塊兒分享本文吧~