webpack4配置vue3.0 vue-composition-api

2020年9月7日

一、前言

vue3.0-beta版已经发布几个月了，最近在网上找了找相关文章怎么使用webpack4配置vue3.0，但网上千篇一律的都是使用vue/cli3、vue/cli4或Vite官网的脚手架写的例子，官网脚手架固然好用，但不乏有对技术的追求者，偏爱webpack自己动手。
虽说2020是一个不平凡的一年，不过没关系，咱们该学的还是要学，永远要保持一颗学习的心态。
对于前端开发者来说，技术革新太快，有点跟不上社会的脚步...，想想也是，譬如nodejs之父又发布了deno，我表示真的学不动啊；又譬如我在项目中一直在用的css-loader@3以下版本，最近升级到4，居然一直报错（此时真想给他几句花的麻的），没时间研究这些不影响大局的东西。
接下来咱们一起来看看vue3在webpack4中怎么使用，这次这篇文章只会讲到vue3的配置，如需了解其他的配置可到官网查看，又或者参考这篇vue2.x的配置。

二、准备

安装nodejs
确保npm可用，当让你喜欢yarn也阔以
安装webpack等相关npm包
安装vue3，这里注意了：

npm i -S vue@next vue-router@next vuex@next
npm i -D vue-loader@next @vue/compiler-sfc

其中@vue/compiler-sfc是针对vue3使用的，在2.x版本中的vue-template-complier不适用于vue3
安装完成后的截图

image.png

image.png

image.png

我这里使用的其他关键包版本：
- babel-loader@8
- core-js@3

三、项目搭建

1.新建一个文件夹webpack-vue3，进入目录打开cmd或者shell，安装以上相关依赖包
2.在webpack-vue3目录下新建src文件夹，在src下分别新建assets、router、views等文件夹，再新建App.vue、index.html、main.js等文件

assets存放图片、css静态资源
router存放路由
views存放.vue页面文件
App.vue

App.vue.png
index.html

index.html.png
main.js

main.js.png

3.在webpack-vue3根目录下新建webpack.config.js，并配置开发相关依赖，其中这里要注意了，再解析vue文件的时候在vue2.x中需要引入const VueLoaderPlugin = require('vue-loader/lib/plugin')并在plugin中添加new VueLoaderPlugin()，若此时再这样用，vue-loader是不会理你的，他会很友好的送你一些红色的文字；那么，此时咱们打开vue-loader包看看