vue-loader的实现原理是什么
一. 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...}。