开发者学堂课程【前端自动化构建工具 Webpack:webpack-dev-server 的常用命令参数】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/587/detail/8213
webpack-dev-server 的常用命令参数
目录:
一、自动打包完成之后直接打开预览器
二、自动修改端口号
三、看到内容
四、启用 hot
一、自动打包完成之后直接打开预览器
现在的路径改成
运行代码:npm run dev
虽然是启动服务器,但是还需要点击链接才能打开预览器。
打包完成之后直接打开预览器的操作方法如下:
在package.json传递相关指令"dev" :"webpack-dev-server --open"
修改完重启服务器代码:npm run dev
即可直接打开预览器。
二、自动修改端口号
在"dev" :"webpack-dev-server --open"加入命令"dev" : "webpack-dev-server --open --port 3000
此时端口为3000,保存重新运行npm run dev
三、看到内容
修改代码"dev": "webpack-dev-server --open --port 3000 --contentBase src"
以src为根目录
重新运行npm run dev
黄色改为绿色
$ ( 'li:odd' ).css ( 'backgroundcolor' , 'green')
找到yellow改成green
四、启用hot
"dev" : "webpack-dev-server --open --port 3000 --contentBase src --hot
重新运行npm run dev
局部更新使用少量的更新就能实现
减少不必要的代码更新
启用 hot,可以实现预览器的无刷新
js 不用被刷新,减少刷新请求
启动 hot 的作用:
网页打补丁
网页不重载