資訊專欄INFORMATION COLUMN
摘要：相關的內容為這樣對于一個處理的第二階段也就結束了，通過去攔截不同類型的，并返回新的，跳過后面的的執行，同時在內部會剔除掉，這樣在進入到下一個處理階段的時候，不在使用的范圍之內，因此下一階段便不會經由來處理。
文章首發于個人github blog: Biu-blog，歡迎大家關注~
Webpack 系列文章：
Webpack Loader 高手進階（一）
Webpack Loader 高手進階（二）
Webpack Loader 高手進階（三）
前2篇文章主要通過源碼分析了 loader 的配置，匹配和加載，執行等內容，這篇文章會通過具體的實例來學習下如何去實現一個 loader。
這里我們來看下 vue-loader(v15) 內部的相關內容，這里會講解下有關 vue-loader 的大致處理流程，不會深入特別細節的地方。
git clone git@github.com:vuejs/vue-loader.git
我們使用 vue-loader 官方倉庫當中的 example 目錄的內容作為整篇文章的示例。
首先我們都知道 vue-loader 配合 webpack 給我們開發 Vue 應用提供了非常大的便利性，允許我們在 SFC(single file component) 中去寫我們的 template/script/style，同時 v15 版本的 vue-loader 還允許開發在 SFC 當中寫 custom block。最終一個 Vue SFC 通過 vue-loader 的處理，會將 template/script/style/custom block 拆解為獨立的 block，每個 block 還可以再交給對應的 loader 去做進一步的處理，例如你的 template 是使用 pug 來書寫的，那么首先使用 vue-loader 獲取一個 SFC 內部 pug 模板的內容，然后再交給 pug 相關的 loader 處理，可以說 vue-loader 對于 Vue SFC 來說是一個入口處理器。
在實際運用過程中，我們先來看下有關 Vue 的 webpack 配置：
const VueloaderPlugin = require("vue-loader/lib/plugin")
module.exports = {
...
module: {
rules: [
...
{
test: /.vue$/,
loader: "vue-loader"
}
]
}
plugins: [
new VueloaderPlugin()
]
...
}
一個就是 module.rules 有關的配置，如果處理的 module 路徑是以.vue形式結尾的，那么會交給 vue-loader 來處理，同時在 v15 版本必須要使用 vue-loader 內部提供的一個 plugin，它的職責是將你定義過的其它規則復制并應用到 .vue 文件里相應語言的塊。例如，如果你有一條匹配 /.js$/ 的規則，那么它會應用到 .vue 文件里的
template block 會經過以下的流程處理：
source.vue?vue&type=template -> vue-loader(抽離 template block ) -> pug-plain-loader(將 pug 模塊轉化為 html 字符串) -> templateLoader(編譯 html 模板字符串，生成 render/staticRenderFns 函數并暴露出去)
我們看到經過 vue-loader 處理時，會根據不同 module path 的類型(query 參數上的 type 字段)來抽離 SFC 當中不同類型的 block。這也是 vue-loader 內部定義的相關規則：
// vue-loader/lib/index.js
const qs = require("querystring")
const selectBlock = require("./select")
...
module.exports = function (source) {
...
const rawQuery = resourceQuery.slice(1)
const inheritQuery = `&${rawQuery}`
const incomingQuery = qs.parse(rawQuery)
...
const descriptor = parse({
source,
compiler: options.compiler || loadTemplateCompiler(),
filename,
sourceRoot,
needMap: sourceMap
})
// if the query has a type field, this is a language block request
// e.g. foo.vue?type=template&id=xxxxx
// and we will return early
if (incomingQuery.type) {
return selectBlock(
descriptor,
loaderContext,
incomingQuery,
!!options.appendExtension
)
}
...
}
當 module path 上的 query 參數帶有 type 字段，那么會直接調用 selectBlock 方法去獲取 type 對應類型的 block 內容，跳過 vue-loader 后面的處理流程(這也是與 vue-loader 第一次處理這個 module時流程不一樣的地方)，并進入到下一個 loader 的處理流程中，selectBlock 方法內部主要就是根據不同的 type 類型(template/script/style/custom)，來獲取 descriptor 上對應類型的 content 內容并傳入到下一個 loader 處理：
module.exports = function selectBlock (
descriptor,
loaderContext,
query,
appendExtension
) {
// template
if (query.type === `template`) {
if (appendExtension) {
loaderContext.resourcePath += "." + (descriptor.template.lang || "html")
}
loaderContext.callback(
null,
descriptor.template.content,
descriptor.template.map
)
return
}
// script
if (query.type === `script`) {
if (appendExtension) {
loaderContext.resourcePath += "." + (descriptor.script.lang || "js")
}
loaderContext.callback(
null,
descriptor.script.content,
descriptor.script.map
)
return
}
// styles
if (query.type === `style` && query.index != null) {
const style = descriptor.styles[query.index]
if (appendExtension) {
loaderContext.resourcePath += "." + (style.lang || "css")
}
loaderContext.callback(
null,
style.content,
style.map
)
return
}
// custom
if (query.type === "custom" && query.index != null) {
const block = descriptor.customBlocks[query.index]
loaderContext.callback(
null,
block.content,
block.map
)
return
}
}
總結
通過 vue-loader 的源碼我們看到一個 Vue SFC 在整個編譯構建環節是怎么樣一步一步處理的，這也是得益于 webpack 給開發這提供了這樣一種 loader 的機制，使得開發者通過這樣一種方式去對項目源碼做對應的轉換工作以滿足相關的開發需求。結合之前的2篇有關 webpack loader 源碼的分析，大家應該對 loader 有了更加深入的理解，也希望大家活學活用，利用 loader 機制去完成更多貼合實際需求的開發工作。
文章首發于個人github blog: Biu-blog，歡迎大家關注~
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102787.html
摘要：在一個構建過程中，首先根據的依賴類型例如調用對應的構造函數來創建對應的模塊。 文章首發于個人github blog: Biu-blog，歡迎大家關注~ Webpack 系列文章： Webpack Loader 高手進階（一）Webpack Loader 高手進階（二）Webpack Loader 高手進階（三） Webpack loader 詳解 loader 的配置 Webpack...
webpack的loaders是一大特色，也是很重要的一部分。這遍博客我將分類講解一些常用的laodershowImg(https://segmentfault.com/img/remote/1460000005742040); 一、loaders之 預處理 css-loader 處理css中路徑引用等問題 style-loader 動態把樣式寫入css sass-loader scss編譯器 ...
摘要：如果函數沒有返回值的話，那么進入到下一個的函數的執行階段。這也是異步化的一種方式如果執行后有返回值，執行開始下一個執行以上就是對于在構建過程中執行流程的源碼分析。 文章首發于個人github blog: Biu-blog，歡迎大家關注~ Webpack 系列文章： Webpack Loader 高手進階（一）Webpack Loader 高手進階（二）Webpack Loader 高手...
摘要：基本環境搭建就不展開講了一插件篇自動補全前綴官方是這樣說的，也就是說它是一個自動檢測兼容性給各個瀏覽器加個內核前綴的插件。 上一篇博客講解了webpack環境的基本，這一篇講解一些更深入的內容和開發技巧。基本環境搭建就不展開講了showImg(http://static.xiaomo.info/images/webpack.png); 一、插件篇 1. 自動補全css3前綴 autop...
摘要：，我想大家應該都知道或者聽過，是前端一個工具可以讓各個模塊進行加載預處理再進行打包。 webpack，我想大家應該都知道或者聽過，Webpack是前端一個工具,可以讓各個模塊進行加載,預處理,再進行打包。現代的前端開發很多環境都依賴webpack構建，比如vue官方就推薦使用webpack.廢話不多說，我們趕緊開始吧. 第一步、安裝webpack 新建文件夾webpack->再在web...
閱讀 3233·2021-09-07 10:10
閱讀 3579·2019-08-30 15:44
閱讀 2577·2019-08-30 15:44
閱讀 2981·2019-08-29 15:11
閱讀 2219·2019-08-28 18:26
閱讀 2744·2019-08-26 12:21
閱讀 1113·2019-08-23 16:12
閱讀 3009·2019-08-23 14:57
