手动搭建vue的webpack配置注意点

官方文档 https://vue-loader.vuejs.org/zh/

主要是对vue文件的处理，那么首先提供了vue-loader处理，同时官方也提示了必须同时安装vue-template-compiler，因为webpack识别不了模板，还要必须添加插件

yarn add -D vue-loader vue-template-compiler

{
   test: /.vue$/,
   loader: "vue-loader",
}

const VueLoaderPlugin = require("vue-loader/lib/plugin");

plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin()
]

这样模板对于vue文件的处理就没有问题了

但是我们的页面启动依旧没有出现我们的内容
是因为vue的默认入口文件问题，可以手动别名来指向vue的内容文件

resolve: {
  alias: {
    vue$: "vue/dist/vue.esm.js",
  },
}

当然如果你不嫌麻烦，每个导入都写成

import Vue from 'vue/dist/vue.esm.js'

然后皆可以跑vue项目了（至于文件打包，热加载什么等等配置,不在本文范畴内）