一文大白话讲清楚webpack基本使用——4——vue-loader的配置和使用

一文大白话讲清楚webpack基本使用------4------vue-loader的配置和使用

1. 建议按文章顺序从头看是看

• 第一篇：
• 一文大白话讲清楚啥是个webpack
• 第二篇：
• 一文大白话讲清楚webpack基本使用------1------完成webpack的初步构建
• 第三篇
• 一文大白话讲清楚webpack基本使用------2------css相关loader的配置和使用
• 第四篇
• 一文大白话讲清楚webpack基本使用------3------图像相关loader的配置和使用
• 然后看本篇，vue-Loader的配置和使用

2. vue-loader的配置和使用

2.1 vue-loader的使用

• 前端开发少不了使用vue框架,我们在src目录下新建目录vue,然后在vue目录下创建App.vue
  

• 当然先安装vue

nom install vue

• 然后完善App.vue

<template>
    <di class="show">{{show}}</di>
</template>
<script setup>
    import {ref} from 'vue'
    const show=ref('I`m App.vue')
</script>
<style scoped>
    .show{
    font-size: 18px;
    color: green;
}
</style>

• 在main.js引入app.vue,并挂载到dom实例

import {App} from './vue/App.vue'
import {createApp} from 'vue'
const app=createApp(App)
app.mount('#app')

• 安装vue-loader

npm install vue-loader

• 配置在webpack.config.js配置vue-loader

{
    test:/\.vue$/,
    loader:'vue-loader'
}

• 因为vue-loader15.x版本以上需要使用VueLoaderPlugin来优化vue-loader的使用，所以我们还要配置一下vueLoaderPlugin插件

const VueLoaderPlugin=require('vue-loader')
new VuewLoaderPlugin()

• 然后我们重新构建

npm run build

• 然后浏览器执行index.html
  

• 此时vue文件已经被构建好了

2.2 vue-loader的原理

• vue-loader的作用是将.vue文件转化为javascript
• 怎么转化，我们看到一个vue组件里面有template,script和style三部分组成
• 所以vue-loader就是通过将vue文件中的这三部分拆分三后分别处理

1. 将vue文件拆分成template,script和style三部分
2. 通过compile将template生成render、staticRenderFns
3. 获取script部分返回的配置对象scriptExports
4. 通过css-loader，vue-style-loader将style部分添加到head中去。或者通过css-loader和MiniCssExtractPlugin将style提取到一个公共的css文件中
5. 最后通过normalizer方法返回完成的组件配置项options