【vue其他相关】简单的来捋清楚vue-loader做了啥事

庞囧

已于 2023-04-02 10:53:48 修改

阅读量408

点赞数 2

分类专栏： # vue其他相关文章标签： vue.js javascript 前端

于 2021-03-19 15:32:04 首次发布

本文链接：https://blog.csdn.net/pagnzong/article/details/115007395

版权

10 篇文章 2 订阅

订阅专栏

vue-loader一个人做不成事

一般vue-loader干的活需要拉上几个好兄弟才行，vue-style-loader、vue-template-compiler、css-loader、sass-loader、less-loader、url-loader，PostCSS、MiniCssExtractPlugin等等。

vue-loader是一个vue文件的翻译官，把vue文件翻译成浏览器能看懂的js。怎么翻译，自己一个人做不到，还需要兄弟的帮助。

首先拿到vue文件，先做切分，分成模板、js代码、css三部分。也就是对应我们写的template、script、stlye标签。
先处理模板，交给vue-template-compiler去处理成render函数（这个函数执行完后就是一个vnode）
vue-loader自己处理script部分
通过css-loader翻译的style交给vue-style-loader，后者将其最终添加到head中。如果我们配置了css单独提取配置的话，vue-style-loader就不用干活了，让配置项MiniCssExtractPlugin给打包成一个单独的css文件。
最终把处理好的东西都交给vue-loader，他进行一个统一的处理，合并成一个带有引用关系的js文件。浏览器就可以理解了。

vue-loader不仅有最基本的工作，还能帮忙打一些黑工。例如style标签的scoped配置的生效工作。

scoped的解释推荐先看：【vue其他相关】理清楚scoped的表层原理，以及父子组件样式继承问题

首先vue-loader在读取vue文件的时候，如果style标签有scoped属性，就会生成一个哈希值
然后PostCSS把每个css选择器改成带有哈希值的属性选择器，交给css-loader读取。
同样css-loader搞完后给vue-style-loader，后者将其最终添加到head中。如果我们配置了css单独提取配置的话，vue-style-loader就不用干活了，让配置项MiniCssExtractPlugin给打包成一个单独的css文件。
最后vue-loader给每个dom加上哈希值属性

关注