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文件。浏览器就可以理解了。
帮style处理scoped配置
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加上哈希值属性