一. vue-loader的作用是什么

　　1.首先我們需要達(dá)成共識(shí)的是，目前瀏覽器，只能識(shí)別普通的html、css、javascript。

　　2.但是為了能夠方便使用vue的組件化開發(fā)，需要我們將代碼寫在.vue單文件組件中。

　　3..vue文件，以及其內(nèi)部的template、style、script區(qū)域代碼，不能直接交給瀏覽器去解析，因?yàn)樗馕霾涣恕?/p>

　　4.所以我們需要一個(gè)vue-loader進(jìn)行.vue單文件組件代碼的轉(zhuǎn)換，也就是

　　5..vue方便開發(fā) ------> vue-laoder協(xié)助翻譯 -----> 瀏覽器才能展示

　　二. vue-loader 工作原理

　　vue-loader 的工作流程， 簡單來說，分為以下幾個(gè)步驟:

　　1.將一個(gè) .vue 文件 切割成 template、script、styles 三個(gè)部分。

　　2.template 部分 通過 compile 生成 render、 staticRenderFns。

　　3.獲取 script 部分 返回的配置項(xiàng)對(duì)象 scriptExports。

　　4.styles 部分，會(huì)通過 css-loader、vue-style-loader， 添加到 head 中， 或者通過 css-loader、MiniCssExtractPlugin 提取到一個(gè) 公共的css文件 中。

　　5.使用 vue-loader 提供的 normalizeComponent 方法， 合并 scriptExports、render、staticRenderFns， 返回 構(gòu)建vue組件需要的配置項(xiàng)對(duì)象 - options， 即 {data, props, methods, render, staticRenderFns...}。