基本使用
我们知道 vue 是一个渐进式框架，我们可以在项目中局部使用，并不侵犯其他代码。
vue 最大的作用就是利用虚拟 dom 将开发者从操作 dom 的繁杂中解放出来，使得开发者可以更专注处理数据的逻辑。
安装：npm i vue
然后我们能就在 webpack 的入口 js 中引入 vue，进行使用了。
import {
createApp} from "vue"
const app = createApp({
template: "<h2>Hello World</h2>"
})
app.mount("#app")
上面代码构建后执行，发现网页没有效果。为什么？这和引入的 vue js 文件有关。
警告信息表示当前运行环境不支持 template 模块选项，建议我们手动导入vue/dist/vue.esm-bundler.js包。
vue 不同的构建版本
import 导入 vue，我们引入的具体是什么？
打开 node_module 文件夹，查看 index.js。发现会根据当前的构建环境导入不同构建版本的 vue js 文件。
打开 dist 目录可以查看 vue 提供的所有构建版本：
构建版本解析
vue(.runtime).global(.prod).js：
- 通过浏览器中的
vue(.runtime).esm-browser(.prod).js：
- 用于通过原生 ES 模块导入使用 (在浏览器中通过
vue(.runtime).esm-bundler.js：
- 用于 webpack，rollup 和 parcel 等构建工具；
- 构建工具中默认是vue.runtime.esm-bundler.js；
- 如果我们需要解析模板template，那么需要手动指定vue.esm-bundler.js；
vue.cjs(.prod).js：
- 服务器端渲染使用；
- 通过require()在Node.js中使用；
运行时+编译器 vs 仅运行时
vue 这么多构建版本，主要分成两类：runtime + compiler 版和 runtime-only 版。
- 运行时+编译器：包含了对 template 模板的编译代码，更加完整，但是也更大一些；
- 仅运行时：没有包含对 template 版本的编译代码，相对更小一些；
上面 webpack 默认引入的就是只有运行环境的版本，没有编译器，所以打包成功了，但是无法渲染到浏览器上展示，浏览器发出警告。
所以我们需要手动指定带有编译器的构建版本：
import {
createApp} from 'vue/dist/vue.esm-bundler.js'
再次构建，就会发现 hello world 已经渲染到浏览器上了。
webpack 构建 SFC 文件
在Vue的开发过程中我们有三种方式来编写DOM元素：
- 方式一：render 函数的方式，使用 h 函数来编写渲染的内容；
- 方式二：template 模板的方式；
- 方式三：通过 .vue 文件中的 template 来编写模板；
这三种方式对引入的 vue 构建包，要求是不同的。
第一种方式 h 函数可以直接返回一个虚拟节点，也就是Vnode节点，所以只需要 vue 的 runtime 就可以。但是后两种都使用了 template 模块，所以还要用的到 vue 中的 compiler 编译模块。
上面的案例就是使用的第二种方式开发，但是在实际开发中，多数情况下我们都是使用** SFC（ single-file components (单文件组件) ）**。vue 中就是 .vue 文件。
使用 sfc 的方式，引入 vue，也不用去手动引入 webpack 版本了，可直接form "vue"
vscode 中也有插件对 sfc 文件提供支持：
- 插件一：Vetur，从Vue2开发就一直在使用的VSCode支持Vue的插件；
- 插件二：Volar，官方推荐的插件（后续会基于Volar开发官方的VSCode插件）；
vue-loader
我们在打包的入口文件中引用 .vue 文件，webpack 肯定是无法解析的，所以需要对应的 loader：vue-loader
安装：npm i vue-loader -D
注意：配置 vue-loader 后，还需要添加它的插件 VueLoaderPlugin
const {
VueLoaderPlugin } = require("vue-loader")
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
use: ["vue-loader"]
}
]
},
plugins: [
new VueLoaderPlugin()
]
}
全局标识配置 vue2 和 dev-tools
我们会发现控制台还有另外的一个警告：
这个警告要求我们全局配置两个变量：__VUE_OPTIONS_API__``__VUE_PROD_DEVTOOLS__
在GitHub上的文档中我们可以找到说明：
一个是使用 Vue 的 Options API，一个是 Production 模式下是否支持 devtools 工具；虽然他们都有默认值，但是强烈建议我们手动对他们进行配置；
options api 这是 vue3 对 vue2 的兼容措施，假如项目中并没有使用到 options API 也就是没用到 vue2 ，则 webpack 打包的时候就会进行 tree shaking，将不必要的 vue2 核心代码剔除。
我们可以在 webpack 的默认插件 definePlugin 中进行手动配置全局变量，告诉 webpack 是否需要剔除 vue2 核心库代码和生成环境下是否对 devtools 工具的支持。
plugins: [
new DefinePlugin({
BASE_URL: "'./'",
__VUE_OPTIONS_API__: true,
__VUE_PROD_DEVTOOLS__: false
})
]