webpack-dev-server 出现错误

一、问题描述

在使用webpack-dev-server时，出现如图错误：

我的配置文件如图：

package.json文件如图：

二、方案一、直接将index.html文件放入dist中

我看的webpack3.x视频中，老师直接将index.html文件放入dist中，同样能够生成首页。

如图：

生成如下页面：

三、方案二，使用HtmlWebpackPlugin插件生成首页

因为出错，所以百度的时候找到了第二种解决方案，即用HtmlWebpackPlugin插件生成首页，去官网瞅了一眼，貌似官网也是用的这个插件，所以就了解了一下。

首先，需要用如下命令安装插件， cnpm i -D html-webpack-plugin,

然后修改配置文件如图：

注意，最后别忘了在插件中生成实例并引用，

最后的结果与放在dist下是一样的，当然，因为用inject注入了打包的js文件，所以不用在html模板中引用js文件了，

如图：

这里是没用<script>标签引入打包后的js文件的！

最后，我用的编辑器是VScode,老师推荐的，还不错，至少很流畅！！！