一. vue-loader的作用是什么
1.首先我們需要達成共識的是,目前瀏覽器,只能識別普通的html、css、javascript。
2.但是為了能夠方便使用vue的組件化開發,需要我們將代碼寫在.vue單文件組件中。
3..vue文件,以及其內部的template、style、script區域代碼,不能直接交給瀏覽器去解析,因為它解析不了。
4.所以我們需要一個vue-loader進行.vue單文件組件代碼的轉換,也就是
5..vue方便開發 ------> vue-laoder協助翻譯 -----> 瀏覽器才能展示
二. vue-loader 工作原理
vue-loader 的工作流程, 簡單來說,分為以下幾個步驟:
1.將一個 .vue 文件 切割成 template、script、styles 三個部分。
2.template 部分 通過 compile 生成 render、 staticRenderFns。
3.獲取 script 部分 返回的配置項對象 scriptExports。
4.styles 部分,會通過 css-loader、vue-style-loader, 添加到 head 中, 或者通過 css-loader、MiniCssExtractPlugin 提取到一個 公共的css文件 中。
5.使用 vue-loader 提供的 normalizeComponent 方法, 合并 scriptExports、render、staticRenderFns, 返回 構建vue組件需要的配置項對象 - options, 即 {data, props, methods, render, staticRenderFns...}。