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这一条
webpack-dev-server的基本配置 和一些错误_第1张图片

在 packge.json中的 "script"属性中添加
"dev": "webpack-dev-server"

这一条

webpack-dev-server的基本配置 和一些错误_第2张图片
此时配置以及完成

在终端里运行 npm run dev
webpack-dev-server的基本配置 和一些错误_第3张图片
这个时候webpack-dev-server就成功的跑起来了!


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


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

-port 3000 指定打开的端口

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

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


如果出现以下错误

webpack-dev-server的基本配置 和一些错误_第4张图片
这是因为webpack.config.js中的路径没有正确配置
解决方法:首先选中webpack.config.js 然后右键复制要打包的文件的相对路径,和要生成的相对路径粘贴到path中;
另一种方法:检查webpack.config.js的头部有没有 ‘let path = require(‘path’)’ 这一句

如果出现这个错误webpack-dev-server的基本配置 和一些错误_第5张图片
这是因为webpack.config.js文件放置的位置错误

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

你可能感兴趣的:(webpack)