三言兩語說透webpack對vue的編譯
1寫在前面
Webpack作為當下最流行的前端構建工具，它可以處理模塊化的JavaScript項目，進行代碼打包和優化。在Vue項目中，Webpack發揮著不可或缺的作用，它負責分析項目中的依賴圖譜，遞歸地構建bundles，從而實現整個項目的構建。
那么Webpack是如何處理Vue單文件組件的呢？它又是通過哪些具體的步驟實現Vue項目的打包和部署的呢？這是每一個Vue開發者都應該理解和掌握的關鍵知識點。
2前置條件
當我們使用Vue CLI創建一個Vue項目時，會自動配置Webpack相關的配置。在項目的根目錄下會有一個webpack.config.js文件，這就是Webpack的配置文件。
我們來看一下這個配置文件中與Vue相關的主要內容：
// webpack配置
const vueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
// ...省略其他配置
module: {
rules: [
// ... 其他規則
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// 請確保引入這個插件!
new vueLoaderPlugin()
]
}vue-loader是Vue單文件組件(SFC)的 Webpack 加載器，它允許你以單文件組件的格式開發 Vue 組件。在 Vue 3 中，vue-loader 封裝了 @vue/compiler-sfc，用于預處理單文件組件。我們來看看 vue-loader 的源碼是如何工作的。
3源碼分析
在vue-loader的源碼中，定義了一個 NormalModule 類，這是 webpack 模塊中代表一個模塊的類。在它的 build 方法中，會調用 this._compile 方法對單文件組件進行加載和解析:
// webpack/lib/NormalModule.js
class NormalModule {
// ...
build(options, compilation, resolver, fs, callback) {
this._compile(options, compilation, resolver, fs, (err, result) => {
// 處理結果...
});
}
_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) => {
// 處理結果...
}
);
}
}在 _compile 中，會調用 runLoaders 方法，執行配置的所有 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);
// 過濾熱重載請求
if (doTransform && resourceQuery && resourceQuery.includes('type=script')) {
// 處理 <script> 部分
}
if (doTransform && resourceQuery && resourceQuery.includes('type=template')) {
// 處理 <template> 部分
}
if (doTransform && resourceQuery && resourceQuery.includes('type=style')) {
// 處理 <style> 部分
}
// 調用默認的 pitch 方法
defaultPitch.call(this, remainingRequest);
};pitch 方法會在一個 loader 處理資源之前被調用。在 vue-loader 中利用這一點，根據 resourceQuery 中傳入的 type，分別處理單文件組件中的三個部分：
- <script> 部分會使用 babel-loader 進行編譯；
- <template> 部分會使用 @vue/compiler-sfc 進行編譯，輸出 render 函數；
- <style> 部分會使用 css-loader 和 style-loader 處理。
接下來我們重點看一下對 <template> 的處理:
const { compileTemplate } = require('@vue/compiler-sfc')
const compiled = compileTemplate({
source: templateContent,
filename,
id
})
// 處理編譯結果這里使用了 @vue/compiler-sfc 的 compileTemplate 方法來編譯模板，會得到編譯后的 render 函數代碼。
對樣式部分的處理也類似，使用 compileStyle 方法編譯生成 CSS 代碼。
通過這種方式，vue-loader 最終輸出瀏覽器可執行的 JS 代碼和 CSS 樣式代碼，以及一些模塊之間的依賴關系，供 webpack 進行模塊合并打包。
綜上，我們看到 vue-loader 的主要工作就是調用 @vue/compiler-sfc 對每個部分進行編譯，輸出瀏覽器可用的代碼。并利用 webpack 的模塊機制，輸出瀏覽器可用的 bundle。
這種做法的優點是:
- 將組件的三部分代碼進行了邏輯上的分割，更清晰；
- 編譯過程可以復用compiler模塊，并做緩存等優化;
- 可以方便地對每個部分使用不同的 loader 做深度處理。
通過源碼分析，我們可以更深入理解 vue-loader 的工作原理，以及 Vue SFC 的編譯過程。這可以幫助我們更好地掌握單文件組件的開發方式，編寫規范的組件代碼。
4大廠面試回答
在大廠面試中經常會出現這個問題，那么需要在下面幾個方面進行回答：
- 說明Vue項目中，Webpack的作用是打包構建Vue組件、資源等，輸出瀏覽器可執行的代碼。
- 介紹在Vue項目中，使用vue-loader來解析Vue的單文件組件(.vue文件)。
- 解釋vue-loader會將單文件組件的模板編譯為render函數，腳本部分編譯為JS代碼，樣式提取為CSS代碼。
- 舉例說明vue-loader對組件模板的編譯過程，使用了@vue/compiler-sfc的compileTemplate方法。
- 概述對組件腳本的處理，會經過babel轉譯，解析ES6等代碼為ES5。
- 描述對樣式的處理，使用CSS加載器提取并處理為瀏覽器可用的CSS。
- 解析出組件之間的依賴關系，輸出給Webpack進行模塊打包。
- 總結Webpack通過vue-loader解析組件，輸出經過優化的瀏覽器可執行代碼。
下面就是可以詳細回答的內容：
在Vue項目中，Webpack的作用是對代碼進行模塊打包和構建，最終輸出瀏覽器可以直接執行的JavaScript代碼。為了實現這個目的，Webpack需要解析Vue的單文件組件，也就是以.vue結尾的文件。
Webpack通過vue-loader來專門處理Vue組件的解析。vue-loader會將單文件組件分割成三部分，分別是模板代碼、腳本代碼和樣式代碼。對于模板部分，vue-loader會使用@vue/compiler-sfc中的compileTemplate方法把模板編譯成render函數，這是Vue實際運行時使用的渲染邏輯。對于腳本部分，會使用babel對其進行編譯和轉換，輸出符合ES5標準的JavaScript代碼。樣式部分則會通過CSS加載器進行處理，最終提取并生成瀏覽器可用的CSS樣式。
在解析組件的過程中，vue-loader還會分析出組件之間的依賴關系，例如組件導入了其它子組件等。這些依賴關系的信息會輸出給Webpack，用于其進一步進行模塊Resolve和依賴收集，最終生成瀏覽器可執行的JavaScript代碼。
所以，Webpack通過vue-loader解析Vue組件，對不同部分應用不同的加載器進行轉換和處理，輸出一個優化且瀏覽器可執行的JavaScript包，以及所需的CSS、資源等，從而實現了對整個Vue項目的構建和打包。這大大簡化了Vue項目的開發流程。
5總結
總結來說，vue-loader 為 Vue 單文件組件提供了非常好的 webpack 支持。通過分析它的源碼，可以讓我們對 Vue SFC 的編譯過程有一個更清晰全面的理解，加深對 Vue 開發的掌握。理解其工作原理也有助于我們更好地運用它，解決實際開發中遇到的問題。
