webpack-dev-server 的常用命令参数| 学习笔记

简介: 快速学习 webpack-dev-server 的常用命令参数

开发者学堂课程前端自动化构建工具 Webpackwebpack-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

局部更新使用少量的更新就能实现

减少不必要的代码更新

image.png

启用 hot,可以实现预览器的无刷新

js 不用被刷新,减少刷新请求

启动 hot 的作用:

网页打补丁

网页不重载

相关文章
|
8天前
webpack成长指北第3章---常用webpack命令及使用webpack命令的方式
webpack成长指北第3章---常用webpack命令及使用webpack命令的方式
28 0
|
8天前
|
JSON 监控 测试技术
《Webpack5 核心原理与应用实践》学习笔记-> 提升插件健壮性
《Webpack5 核心原理与应用实践》学习笔记-> 提升插件健壮性
55 0
|
8天前
|
缓存 前端开发 API
《Webpack5 核心原理与应用实践》学习笔记-> webpack插件开发基础
《Webpack5 核心原理与应用实践》学习笔记-> webpack插件开发基础
72 0
|
8天前
|
前端开发 JavaScript 测试技术
《Webpack5 核心原理与应用实践》学习笔记-> webpack的loader运行与调试
《Webpack5 核心原理与应用实践》学习笔记-> webpack的loader运行与调试
38 0
|
8天前
|
存储 缓存 JavaScript
《Webpack5 核心原理与应用实践》学习笔记-> webpack的loader开发技巧
《Webpack5 核心原理与应用实践》学习笔记-> webpack的loader开发技巧
47 1
|
8天前
|
缓存 监控 JavaScript
《Webpack5 核心原理与应用实践》学习笔记-> webpack极致性能优化
《Webpack5 核心原理与应用实践》学习笔记-> webpack极致性能优化
33 1
|
8天前
|
前端开发 JavaScript
《Webpack5 核心原理与应用实践》学习笔记-> webpack代码压缩
《Webpack5 核心原理与应用实践》学习笔记-> webpack代码压缩
55 0
|
8天前
|
监控 IDE 开发工具
《Webpack5 核心原理与应用实践》学习笔记-> webpack性能优化技巧
《Webpack5 核心原理与应用实践》学习笔记-> webpack性能优化技巧
70 0
|
8天前
|
JavaScript 前端开发 API
《Webpack5 核心原理与应用实践》学习笔记-> webpack并行构建
《Webpack5 核心原理与应用实践》学习笔记-> webpack并行构建
77 0
|
8天前
|
前端开发 测试技术
《Webpack5 核心原理与应用实践》学习笔记-> webpack核心配置结构
《Webpack5 核心原理与应用实践》学习笔记-> webpack核心配置结构
61 1