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包看看

vue-loader.png

你会发现，你会讶异，他丫并没有lib文件夹，于是乎我就打开dist文件夹看看

vue-loader-dist.png

dist下这么多js，不知道是用来干嘛的，再于是乎，我就挨个试试到底是哪个文件可用，因为以前（vue2.x）使用的是vue-loader/lib/plugin，所以我也就只有找vue-loader/dist/plugin，不过在我启动webpack dev的时候，他也确实给我反馈了

npm run dev.png

哎呀呀~
TypeError: VueLoaderPlugin is not a constructor
哦嚯~
再打开plugin.js

plugin.js.png

这里明明配置了导出default，没事，既然不成功我就在webpack.config.js中添加个.default

VueLoaderPlugin.png

再次启动，就这样成功了

successfully.png

至此，vue3配置踩坑记圆满完成

四、写个demo试试

• 在view文件夹下新建 Home.vue

  
  
  

  Home.vue.png
  
  

  vue3的语法在这里就不做解释，有时间咱们咱一起学习一下vue3的语法

• 页面预览

  
  
  

  localhost.png

五、最后

• 想看源码的欢迎咨询
• 待vue3正式版发版之后，我会做一个补充，会配置一套完成的开发环境，欢迎大家指正。