原课程中会讲单文件构建和服务端渲染，这里我将其拆成两个部分做笔记，这篇主要讲单文件构建。
使用vue-loader处理.vue文件
*.vue文件就是Vue SFC(Single File Component)文件，是使用类 HTML 语法描述 Vue 组件的自定义文件格式，和之前的的.css一样，webpack不能识别这种类型的文件，这个时候就需要借助vue-loader。
- 安装依赖：
npm i -D vue vue-loader
课程中少写了
vue项目的创建和使用，如果直接按照课程中的来大概率是不能成功的，所以这里根据我的理解直接多安装了一个vue。
- 根据我上一节的节奏来，直接在
base.config.js文件中添加对vue的配置，如下
// base.config.js // 引入 vue-loader，vue-loader 会自带一个 VueLoaderPlugin const { VueLoaderPlugin } = require("vue-loader"); module.exports = { module: { rules: [ // 对于 .vue 文件使用 vue-loader 进行处理 { test: /.vue$/, use: { loader: 'vue-loader' } } ] }, plugins: [ // 这里还需要使用 VueLoaderPlugin new VueLoaderPlugin() ] }
上面的配置默认是带有之前章节的配置信息的，上的配置都是新增的配置信息，之后不再赘述。
- 新建一个
App.vue文件，内容如下
<template> <div> <h1>{{ message }}</h1> <h1>{{ setupMessage }}</h1> </div> </template> <script> // 这里没有使用 setup 语法糖 export default { // vue3是支持setup的 setup() { return { setupMessage: 'hello setup' } }, // 同时也支持 options api data() { return { message: 'hello Vue' } } } </script> <style scoped> h1 { color: orange; } </style>
- 修改
index.js的内容如下
import {createApp} from 'vue' import App from './App.vue' createApp(App).mount('#app')
- 上一章讲
html-webpack-plugin的时候，新建了一个index.html，现在里面的内容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Webpack</title> </head> <body> <div id="app"></div> </body> </html>
- 现在可以运行
npm run devornpm run build查看效果啦。
至此一套
vue的开发环境已经配置完成，本篇只讲了一个loader，就完成对一整套的vue开发环境的配置，这还是建立在之前学习的很多loader。现在使用之前的配置是可以在
.vue文件中使用less和typescript，感兴趣的可以亲自去尝试，就当扩展训练吧。
拓展
以上是直接使用
webpack搭建的vue的一套开发环境，但是现在市面还是有开箱即用的方案，不需要额外的配置就可以轻松搭建一套vue的开发环境，最具代表的就是vue-cli和vite。
vue-cli是官方指定的vue脚手架，提供一整套完整的配置，让你开箱即用。vite是vue的作者开发的一个打包工具，针对的场景不仅仅是vue，内部使用的是esModule，对于开发构建速度有很大的提升。
总结
今天没有官方总结，就自己总结了，使用webpack去创建一个vue的开发环境并不难，合理的使用好拼图（loader、plugin）就可以了。
vue-loader会将.vue文件进行转换。
<template>会转换成render函数。<script>会转换成JavaScript字面量形式。<style>会根据配置转换成对应的css，或在.js中，或单独存在.css文件中。
