1寫在前面

Webpack作為當(dāng)下最流行的前端構(gòu)建工具，它可以處理模塊化的JavaScript項(xiàng)目，進(jìn)行代碼打包和優(yōu)化。在Vue項(xiàng)目中，Webpack發(fā)揮著不可或缺的作用，它負(fù)責(zé)分析項(xiàng)目中的依賴圖譜，遞歸地構(gòu)建bundles，從而實(shí)現(xiàn)整個(gè)項(xiàng)目的構(gòu)建。

那么Webpack是如何處理Vue單文件組件的呢？它又是通過哪些具體的步驟實(shí)現(xiàn)Vue項(xiàng)目的打包和部署的呢？這是每一個(gè)Vue開發(fā)者都應(yīng)該理解和掌握的關(guān)鍵知識(shí)點(diǎn)。

2前置條件

當(dāng)我們使用Vue CLI創(chuàng)建一個(gè)Vue項(xiàng)目時(shí)，會(huì)自動(dòng)配置Webpack相關(guān)的配置。在項(xiàng)目的根目錄下會(huì)有一個(gè)webpack.config.js文件，這就是Webpack的配置文件。

我們來看一下這個(gè)配置文件中與Vue相關(guān)的主要內(nèi)容：

// webpack配置
const vueLoaderPlugin = require('vue-loader/lib/plugin') 

module.exports = {
  // ...省略其他配置
  
  module: {
    rules: [
      // ... 其他規(guī)則
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },

  plugins: [
    // 請(qǐng)確保引入這個(gè)插件!
    new vueLoaderPlugin()
  ]
}

vue-loader是Vue單文件組件(SFC)的 Webpack 加載器，它允許你以單文件組件的格式開發(fā) Vue 組件。在 Vue 3 中，vue-loader 封裝了 @vue/compiler-sfc，用于預(yù)處理單文件組件。我們來看看 vue-loader 的源碼是如何工作的。

3源碼分析

在vue-loader的源碼中，定義了一個(gè) NormalModule 類，這是 webpack 模塊中代表一個(gè)模塊的類。在它的 build 方法中，會(huì)調(diào)用 this._compile 方法對(duì)單文件組件進(jìn)行加載和解析:

// webpack/lib/NormalModule.js

class NormalModule {
  // ...
  build(options, compilation, resolver, fs, callback) {
    this._compile(options, compilation, resolver, fs, (err, result) => {
      // 處理結(jié)果...
    });
  }

  _compile(options, compilation, resolver, fs, callback) {
    const loaderContext = this.createLoaderContext(resolver, options, fs, compilation);

    runLoaders(
      {
        resource: this.resource,
        loaders: this.loaders,
        context: loaderContext,
        readResource: fs.readFile.bind(fs)
      },
      (err, result) => {
        // 處理結(jié)果...
      }
    );
  }
}

在 _compile 中，會(huì)調(diào)用 runLoaders 方法，執(zhí)行配置的所有 loader，其中就包含了 vue-loader。

接下來我們看一下 vue-loader 的源碼，主要的是 pitch 方法:

// vue-loader/index.js

module.exports.pitch = function(remainingRequest) {
  const { loaders, resourcePath, resourceQuery } = this;

  const doTransform = !remainingRequest.includes(hotReloadAPIPath); 
  // 過濾熱重載請(qǐng)求

  if (doTransform && resourceQuery && resourceQuery.includes('type=script')) {
    // 處理 <script> 部分
  }

  if (doTransform && resourceQuery && resourceQuery.includes('type=template')) {
    // 處理 <template> 部分 
  }

  if (doTransform && resourceQuery && resourceQuery.includes('type=style')) {
    // 處理 <style> 部分
  }

  // 調(diào)用默認(rèn)的 pitch 方法
  defaultPitch.call(this, remainingRequest); 
};

pitch 方法會(huì)在一個(gè) loader 處理資源之前被調(diào)用。在 vue-loader 中利用這一點(diǎn)，根據(jù) resourceQuery 中傳入的 type，分別處理單文件組件中的三個(gè)部分：

• <script> 部分會(huì)使用 babel-loader 進(jìn)行編譯；
• <template> 部分會(huì)使用 @vue/compiler-sfc 進(jìn)行編譯，輸出 render 函數(shù)；
• <style> 部分會(huì)使用 css-loader 和 style-loader 處理。

接下來我們重點(diǎn)看一下對(duì) <template> 的處理:

const { compileTemplate } = require('@vue/compiler-sfc')

const compiled = compileTemplate({
  source: templateContent,
  filename,
  id
})

// 處理編譯結(jié)果

這里使用了 @vue/compiler-sfc 的 compileTemplate 方法來編譯模板，會(huì)得到編譯后的 render 函數(shù)代碼。

對(duì)樣式部分的處理也類似，使用 compileStyle 方法編譯生成 CSS 代碼。

通過這種方式，vue-loader 最終輸出瀏覽器可執(zhí)行的 JS 代碼和 CSS 樣式代碼，以及一些模塊之間的依賴關(guān)系，供 webpack 進(jìn)行模塊合并打包。

綜上，我們看到 vue-loader 的主要工作就是調(diào)用 @vue/compiler-sfc 對(duì)每個(gè)部分進(jìn)行編譯，輸出瀏覽器可用的代碼。并利用 webpack 的模塊機(jī)制，輸出瀏覽器可用的 bundle。

這種做法的優(yōu)點(diǎn)是:

• 將組件的三部分代碼進(jìn)行了邏輯上的分割，更清晰；
• 編譯過程可以復(fù)用compiler模塊，并做緩存等優(yōu)化;
• 可以方便地對(duì)每個(gè)部分使用不同的 loader 做深度處理。

通過源碼分析，我們可以更深入理解 vue-loader 的工作原理，以及 Vue SFC 的編譯過程。這可以幫助我們更好地掌握單文件組件的開發(fā)方式，編寫規(guī)范的組件代碼。

4大廠面試回答

在大廠面試中經(jīng)常會(huì)出現(xiàn)這個(gè)問題，那么需要在下面幾個(gè)方面進(jìn)行回答：

• 說明Vue項(xiàng)目中，Webpack的作用是打包構(gòu)建Vue組件、資源等，輸出瀏覽器可執(zhí)行的代碼。
• 介紹在Vue項(xiàng)目中，使用vue-loader來解析Vue的單文件組件(.vue文件)。
• 解釋vue-loader會(huì)將單文件組件的模板編譯為render函數(shù)，腳本部分編譯為JS代碼，樣式提取為CSS代碼。
• 舉例說明vue-loader對(duì)組件模板的編譯過程，使用了@vue/compiler-sfc的compileTemplate方法。
• 概述對(duì)組件腳本的處理，會(huì)經(jīng)過babel轉(zhuǎn)譯，解析ES6等代碼為ES5。
• 描述對(duì)樣式的處理，使用CSS加載器提取并處理為瀏覽器可用的CSS。
• 解析出組件之間的依賴關(guān)系，輸出給Webpack進(jìn)行模塊打包。
• 總結(jié)Webpack通過vue-loader解析組件，輸出經(jīng)過優(yōu)化的瀏覽器可執(zhí)行代碼。

下面就是可以詳細(xì)回答的內(nèi)容：

在Vue項(xiàng)目中，Webpack的作用是對(duì)代碼進(jìn)行模塊打包和構(gòu)建，最終輸出瀏覽器可以直接執(zhí)行的JavaScript代碼。為了實(shí)現(xiàn)這個(gè)目的，Webpack需要解析Vue的單文件組件，也就是以.vue結(jié)尾的文件。

Webpack通過vue-loader來專門處理Vue組件的解析。vue-loader會(huì)將單文件組件分割成三部分，分別是模板代碼、腳本代碼和樣式代碼。對(duì)于模板部分，vue-loader會(huì)使用@vue/compiler-sfc中的compileTemplate方法把模板編譯成render函數(shù)，這是Vue實(shí)際運(yùn)行時(shí)使用的渲染邏輯。對(duì)于腳本部分，會(huì)使用babel對(duì)其進(jìn)行編譯和轉(zhuǎn)換，輸出符合ES5標(biāo)準(zhǔn)的JavaScript代碼。樣式部分則會(huì)通過CSS加載器進(jìn)行處理，最終提取并生成瀏覽器可用的CSS樣式。

在解析組件的過程中，vue-loader還會(huì)分析出組件之間的依賴關(guān)系，例如組件導(dǎo)入了其它子組件等。這些依賴關(guān)系的信息會(huì)輸出給Webpack，用于其進(jìn)一步進(jìn)行模塊Resolve和依賴收集，最終生成瀏覽器可執(zhí)行的JavaScript代碼。

所以，Webpack通過vue-loader解析Vue組件，對(duì)不同部分應(yīng)用不同的加載器進(jìn)行轉(zhuǎn)換和處理，輸出一個(gè)優(yōu)化且瀏覽器可執(zhí)行的JavaScript包，以及所需的CSS、資源等，從而實(shí)現(xiàn)了對(duì)整個(gè)Vue項(xiàng)目的構(gòu)建和打包。這大大簡(jiǎn)化了Vue項(xiàng)目的開發(fā)流程。

5總結(jié)

總結(jié)來說，vue-loader 為 Vue 單文件組件提供了非常好的 webpack 支持。通過分析它的源碼，可以讓我們對(duì) Vue SFC 的編譯過程有一個(gè)更清晰全面的理解，加深對(duì) Vue 開發(fā)的掌握。理解其工作原理也有助于我們更好地運(yùn)用它，解決實(shí)際開發(fā)中遇到的問題。