webpack對vue單檔案元件的解析

2022-06-22 00:48:13 字數 776 閱讀 6069

vue2.0

step0:

首先vuelloaderplugin會在webpack初始化的時候 注入pitcher這個rule,然後將rules進行排序,

[pitcher,...clonedrule, vuerule], pitcher對應的pitch-loader會對query欄位中有vue欄位的進行處理

step1:

vue-loader處理.vue結尾的檔案,當query中沒有type欄位的時候,會生成一大坨js**

其中包含template/script/style各個部分不同的request

step2:

webpack內建的acron對這一大坨js**進行parse,依賴收集的過程中處理step1中生成的request,這些request的query中帶著vue欄位,

於是最終會被step1中加入的pitch-loader的處理,處理中會剔除掉pitcher自身,並返回新的request

step3:

vue-loader處理新的request,經過pitch-loader處理後的request中已經帶著type欄位了,於是會selectblock,獲取vue檔案中對應的block內的content,並用下乙個loader去處理

對於templateblock最終用templateloader生成reder/staticrenderfns函式並暴露出去

對於sytleblock會用stylepostloader處理scopedcss,使用css-loader處理資源引入路徑,使用style-loader將css插入dom

webpack打包 vue檔案

在webpack中配置.vue元件頁面的解析 vue loader 1 執行npm i vue s將vue安裝為執行依賴 2 運cnpm i vue loader vue template compiler d將解析轉換vue的包安裝為開發依賴 3 執行npm i style loader css ...

webpack 打包檔案 vue 過大

在 build webpack.base.conf.js 檔案裡加上 externals 不需要打包的檔案就放寫在這裡,然後在 index.html 外連上這些庫 順便記錄乙個連線後面加入版本號 在 webpack.prod.conf.js 檔案裡 自己獲取乙個時間加在後面就可以了 官方 impor...

談吐對vue的理解以及webpack

vue.js不是乙個框架,它只聚焦檢視層,是乙個構建資料驅動的web介面的庫。特性 輕量級 體積小,不依賴其他基礎庫 資料繫結 指令和angularjs 可以用一些內建的簡單指令 v 也可以自定義指令,通過對應表示式的值的變化就可以修改對應的dom 外掛程式化vue的核心不包含router,ajax...