开发服务器

开发阶段,目前遇到的问题是打包、运行、调试过程过于繁琐,回顾一下我们的操作流程:

  1. 编写代码
  2. 控制台运行命令完成打包
  3. 打开页面查看效果
  4. 继续编写代码,回到步骤2

并且,我们往往希望把最终生成的代码和页面部署到服务器上,来模拟真实环境

为了解决这些问题,webpack官方制作了一个单独的库:webpack-dev-server

既不是plugin也不是loader

先来看看它怎么用

  1. 安装
  2. 执行webpack-dev-server命令

webpack-dev-server命令几乎支持所有的webpack命令参数,如--config-env等等,你可以把它当作webpack命令使用

这个命令是专门为开发阶段服务的,真正部署的时候还是得使用webpack命令

当我们执行webpack-dev-server命令后,它做了以下操作:

  1. 内部执行webpack命令,传递命令参数
  2. 开启watch
  3. 注册hooks:类似于plugin,webpack-dev-server会向webpack中注册一些钩子函数,主要功能如下:
    1. 将资源列表(aseets)保存起来
    2. 禁止webpack输出文件
  4. 用express开启一个服务器,监听某个端口,当请求到达后,根据请求的路径,给予相应的资源内容

配置

针对webpack-dev-server的配置,参考:https://www.webpackjs.com/configuration/dev-server/

常见配置有:

  • port:配置监听端口
  • proxy:配置代理,常用于跨域访问
  • stats:配置控制台输出内容
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐