快速的开发和调试环境是至关重要的。使用 webpack-dev-server 可以显著提高开发效率。本文将介绍如何设置和运行开发模式。
- npm run dev 将开发模式跑起来,能够更好的调试
- 设置端口号,代理转发,需要配置devServer字段
- 再用命令webpack-dev-server去运行
webpack-dev-server的工作原理
是使用Express开启node服务的一个工具,使用这个node服务就会调起一个webpack方法去打包,再将打包结果返回展示出来
当改变的时候再通知expres开启服务再次打包,再次返回打包后的结果.....
配置Webpack打包
案例:
- webpack配置文件:
- 入口文件index.html
- 入口文件 app.js
现在我们写一个js文件自己去跑开发模式
步骤1,安装express和中间件
步骤2:引入中间件,编写js代码
调用webpack方法就会打包(和cmd中输入webpack命令效果是一样的)
- 使用webpack启动服务
- 使用中间件去跑开启的服务
- 在cmd使用node命令运行我们编写好的js文件去跑开发
- node mydev.js
- 到此为止,可以实现配置webpack打包
回到主线，现在需要配置devServer
编写开发配置
- 指定端口号，指定是否热更新
使用命令跑项目
webpack-dev-server
package.json中也可以配置 npm run 的形式,这里我们使用webpack自带的运行代码
扩展
什么是热更新
热更新:
- 完全不会刷新浏览器,保持浏览器状态
强制更新:
- 会自动刷新页面,会重置页面状态
热更新示例:
js默认是强制更新,除此外其他的类似css代码都是热更新
所以一般js代码一更新就会重置页面状态(整个页面逻辑重新开始)
如何实现js代码热更新呢???
有的有的
存在hot模块,这段代码就会进行热更新了
一般来说js代码热更新没有必要
上面介绍的这里的hot能够使css热更新,一般来说css热更新比较好,这里一般设置为true
proxy 代理
Proxy说白了就是由我们webpack-dev-server开启的node服务来代替我们请求接口，因为如果后端没有开启cors(除非后端开启cors否则必报错),我们直接从前端请求会跨域。我们可以利用proxy。让请求从node服务发
请求先到node服务,node服务再转发到接口
proxy只用于开发阶段解决跨域问题,最终完成的项目放到线上肯定就没有这个服务了,真正上线就是用服务器开启这个服务了
示例:
- 用node模拟一个接口
- 使用axios模拟请求发送
- 遇到/就转发
webpack5里面proxy要用数组对象写法去代理了 不写会报错
proxy的简化路径重写
代理配置请求头
source-map 模式
出现错误,或者输出内容的时候，在浏览器的控制台,，source-map能够帮助我们定位到它来自哪个代码（定位到打包前的代码）
要想定位到打包前的代码，需要在代码中调整source-map的等级
开发模式最常用的 eval-cheap-source-map
