一文大白话讲清楚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

js 复制代码

nom install vue

然后完善App.vue

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实例

js 复制代码

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

安装vue-loader

js 复制代码

npm install vue-loader

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

js 复制代码

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

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

js 复制代码

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

然后我们重新构建

js 复制代码

npm run build

然后浏览器执行index.html
此时vue文件已经被构建好了

2.2 vue-loader的原理

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

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