一、问题描述
在使用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,老师推荐的,还不错,至少很流畅!!!
本文介绍在使用webpack-dev-server遇到首页生成错误时的两种解决方案:一是直接将index.html放置于dist目录;二是利用HtmlWebpackPlugin插件自动生成首页,并注入打包后的JS文件。

被折叠的 条评论
为什么被折叠?



