46 vue-loader是什么？它有什么作用？

回答范例

vue-loader是用于处理单文件组件（SFC，Single-File Component）的webpack loader
因为有了vue-loader，我们就可以在项目中编写SFC格式的Vue组件，我们可以把代码分割为<template>、<script>和<style>，代码会异常清晰。结合其他loader我们还可以用Pug编写<template>，用SASS编写<style>，用TS编写<script>。我们的<style>还可以单独作用当前组件
webpack打包时，会以loader的方式调用vue-loader
vue-loader被执行时，它会对SFC中的每个语言块用单独的loader链处理。最后将这些单独的块装配成最终的组件模块

原理

vue-loader会调用@vue/compiler- sfc模块解析SFC源码为一个描述符（Descriptor），然后为每个语言块生成import代码，返回的代码类似下面

    // source.vue被vue-loader处理之后返回的代码
    
    // import the <template> block
    import render from 'source.vue?vue&type=template'
    // import the <script> block
    import script from 'source.vue?vue&type=script'
    export * from 'source.vue?vue&type=script'
    // import <style> blocks
    import 'source.vue?vue&type=style&index=1'
    
    script.render = render
    export default script

我们想要script块中的内容被作为js处理（当然如果是<script lang="ts">被作为ts理），这样我们想要webpack把配置中跟.js匹配的规则都应用到形如source.vue?vue&type=script的这个请求上。例如我们对所有*.js配置了babel- loader，这个规则将被克隆并应用到所在Vue SFC

    import script from 'source.vue?vue&type=script

将被展开为：

    import script from 'babel-loader!vue-loader!source.vue?vue&type=script'

类似的，如果我们对.sass文件配置了style-loader + css-loader + sass-loader，对下面的代码

    <style scoped lang="scss">

vue-loader将会返回给我们下面结果：

    import 'source.vue?vue&type=style&index=1&scoped&lang=scss'

然后webpack会展开如下：

    import 'style-loader!css-loader!sass-loader!vue-loader!source.vue?vue&type=style&index=1&scoped&lang=scss'

当处理展开请求时，vue-loader将被再次调用。这次，loader将会关注那些有查询串的请求，且仅针对特定块，它会选中特定块内部的内容并传递给后面匹配的loader
对于<script>块，处理到这就可以了，但是<template> 和 <style>还有一些额外任务要做，比如
- 需要用 Vue 模板编译器编译template，从而得到render函数
- 需要对 <style scoped>中的CSS做后处理（post-process），该操作在css-loader之后但在style-loader之前

实现上这些附加的loader需要被注入到已经展开的loader链上，最终的请求会像下面这样：

    // <template lang="pug">
    import 'vue-loader/template-loader!pug-loader!source.vue?vue&type=template'
    
    // <style scoped lang="scss">
    import 'style-loader!vue-loader/style-post-loader!css-loader!sass-loader!vue-loader!source.vue?vue&type=style&index=1&scoped&lang=scss'

46 vue-loader是什么？它有什么作用？

详情