webapck打包main.js的代码进bundle.js之后，html无法在bundle.js中找到组件

我想用webapck把我写在main.js的js代码通过webapck打包进bundle.js，我用的是vue2.5，npm安装好vue后，我也在webpack.config.js配置了vue指定的构建版本是runtime-compiler

下面是我的main.js代码

但是一运行就报错了，报错如下

但是我打开bundle.js文件查看是有main.js的代码的

下面是我的html代码

下面是webpack.config.js

本人在学习vuejs，有很多不懂得地方，求求有大神知道是怎么回事的吗？

https://www.imooc.com/qadetail/218162?lastmedia=1

你这改了入口文件，那你配置文件那里改了入口文件的路径了吗？