开发模式（webpack-dev-server）

快速的开发和调试环境是至关重要的。使用 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

详细查阅文档