vue-loader是怎麼運行的

特性

vue-loader提供給webpack使用。主要提供如下的幾點特性

• 容許對Vue組件的每一個部分使用其餘webpack加載器，例如，對於<style>是Sass預處理器，對於<template>能夠是Pug模版引擎
• 容許.vue文件中定製區塊，這些定製塊能夠應用定製的加載程序鏈

<template>
  <div></div>
</template>

<script>
export default {
  
}
</script>

<style>
</style>

複製代碼

• 將<style>和<template>中引用的靜態資產視爲模塊依賴項，並使用webpack加載器處理它們；
• 模擬每一個組件的做用域CSS；
• 在開發過程當中保持狀態的熱重載。

vue-loader與webpack的結合爲咱們提供了強大的工做流

如何工做

接下來看看他是如何工做的

第一步

使用 @vue/component-compiler-utils 將SFC源代碼解析爲SFC描述符，而後，它爲每種語言塊生成一個導入，所以實際返回的模塊代碼以下所示

// code returned from the main loader for '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中導入的，可是域不一樣。

第二步，針對不一樣語言

若是咱們想指定對應區塊內的語言，好比<script lang="ts">, 這時候VueLoaderPlugin派上用場，對於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'
複製代碼

若是你爲爲* .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'
複製代碼

第三步

處理擴展的請求時， vue-loader會被再次調用，此次webpack加載程序會注意到請求具備查詢而且僅針對特定的塊，選擇目標塊的內部內容，並將其傳遞給匹配的目標裝載程序。

第四步，轉換

對於<script>塊，轉換基本結束，對於<template> 和 <style> 塊來講，還有一些額外的任務須要執行。

• 須要使用Vue模板編譯器來編譯模板

• 須要在css-loader執行前, 對<style scoped>塊進行處理

從技術上講，這些是額外的裝載機（templateLoader，stylePostLoader），須要注入擴展的加載程序鏈中，若是最終用戶必須本身配置，那將很是複雜，因此 VueLoaderPlugin也注入了全局的加載器來攔截<template>和 <style> 的塊請求，並注入必要的裝載機最終請求以下所示。

// <template lang="pug">
import 'vue-loader/template-loader!pug-loader!vue-loader!source.vue?vue&type=template'

// <style scoped lang="scss">
import 'style-loader!css-loader!vue-loader/style-post-loader!sass-loader!vue-loader!source.vue?vue&type=style&index=1&scoped&lang=scss'
複製代碼