webpack-dev-server 出现错误

一、问题描述

在使用webpack-dev-server时,出现如图错误:

webpack-dev-server 出现错误_第1张图片

我的配置文件如图:

webpack-dev-server 出现错误_第2张图片

package.json文件如图:

webpack-dev-server 出现错误_第3张图片

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

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

如图:

webpack-dev-server 出现错误_第4张图片

生成如下页面:

webpack-dev-server 出现错误_第5张图片

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

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

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

然后修改配置文件如图:

webpack-dev-server 出现错误_第6张图片

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

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

如图:

webpack-dev-server 出现错误_第7张图片

这里是没用

你可能感兴趣的:(前端学习)