一文大白话讲清楚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文件中的这三部分拆分三后分别处理
- 将vue文件拆分成template,script和style三部分
- 通过compile将template生成render、staticRenderFns
- 获取script部分返回的配置对象scriptExports
- 通过css-loader，vue-style-loader将style部分添加到head中去。或者通过css-loader和MiniCssExtractPlugin将style提取到一个公共的css文件中
- 最后通过normalizer方法返回完成的组件配置项options
