这篇文章主要介绍了解读Vue-loader的相关知识，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
什么是Vue-loader?
官方文档中具有专业的解释，个人理解，用里面的一句话来总结就是，webpack 和 Vue Loader 的结合为你提供了一个现代、灵活且极其强大的前端工作流，来帮助撰写 Vue.js 应用
一、处理资源路径
当 Vue Loader 编译单文件组件中的 块时，它也会将所有遇到的资源 URL 转换为 webpack 模块请求。
例如：
将会被编译为一个 模块请求：
createElement('img', { attrs: { src: require('../image.png-600') // 现在这是一个模块的请求了 } }) 默认下列标签/特性的组合会被转换，且这些组合时可以使用 transformAssetUrls 选项进行配置的。
{ video: ['src', 'poster'], source: 'src', img: 'src', image: ['xlink:href', 'href'], use: ['xlink:href', 'href'] } 此外，如果你配置了为
3.2 子组件根元素
使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式
通常为了避免组件之间样式的相互影响，最好用的办法就是在最外层添加一个不带class属性的div，这样就不必去找根元素的类名然后避免重名这一麻烦的步骤了
3.3 深度作用选择器
如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：
PS：有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作
注意：
- Scoped 样式不能代替 class。考虑到浏览器渲染各种 CSS 选择器的方式，当 p { color: red } 是 scoped 时 (即与特性选择器组合使用时) 会慢很多倍。如果你使用 class 或者 id 取而代之，比如 .example {
- color: red }，性能影响就会消除。
- 在递归组件中小心使用后代选择器! 对选择器 .a .b 中的 CSS 规则来说，如果匹配 .a 的元素包含一个递归子组件，则所有的子组件中的 .b 都将被这个规则匹配
四、热重载
“热重载”不只是当你修改文件的时候简单重新加载页面。启用热重载后，当你修改 .vue
文件时，该组件的所有实例将在不刷新页面的情况下被替换。它甚至保持了应用程序和被替换组件的当前状态！当你调整模版或者修改样式时，这极大地提高了开发体验。
4.1 状态保留规则
- 当编辑一个组件的 时，这个组件实例将就地重新渲染，并保留当前所有的私有状态。能够做到这一点是因为模板被编译成了新的无副作用的渲染函数
- 当编辑一个组件的