webpack-dev-server的基本配置 和一些错误

2019年9月5日
webpack-dev-server是一个非常强大的工具，能够自动检测到我们的代码更新并且自动打包

当完成webpack的配置之后 -------->webpack的基本配置

安装webpack-dev-server 在控制台输入 'npm i webpack-dev-server -y'

在packge.json中可以看到 devDependencies 中新增了web-dev-server这一条

在 packge.json中的 "script"属性中添加

"dev": "webpack-dev-server"

这一条

此时配置以及完成

在终端里运行 npm run dev

这个时候webpack-dev-server就成功的跑起来了！

---

web-dev-server的几个基本命令 "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"

-open 运行命令后立即开启页面

-port 3000 指定打开的端口

-contentBase src 指定打开的路径是src

-hot 只更新变更的代码段，而不是更新全部代码段

---

如果出现以下错误

这是因为webpack.config.js中的路径没有正确配置
解决方法：首先选中webpack.config.js 然后右键复制要打包的文件的相对路径，和要生成的相对路径粘贴到path中；
另一种方法：检查webpack.config.js的头部有没有 ‘let path = require(‘path’)’ 这一句

如果出现这个错误
这是因为webpack.config.js文件放置的位置错误

解决方法：将webpack.config.js移动到项目的根路径下，而不是放在src的路径下