实时构建

如果每一次小的改动都要手动执行一遍构建才能看到效果,开发效率会很低下。监听文件改动并实时构建的能力成为新一代打包工具的标配。
在webpack中,通过添加--watch选项即可开启监视功能,webpack会依据构建得到的依赖关系,对文件进行监听,一旦发生改动则触发重新构建:

webpack -w

除了watch模式外,webpack还提供了webpack-dev-server来辅助开发与调试。
webpack-dev-server是一个基于Express框架的Node.js服务器。它还提供了一个客户端运行环境,会被注入到页面代码中执行,并通过Socket.IO与服务端通信。服务端的每次改动都会被通知到页面上,页面可以随之做出反应。除了自动刷新外,还提供有模块热替换(Hot Module Replacement)的强大功能。
使用webpack-dev-server需要额外安装webpack-dev-server包:

npm install webpack-dev-server -g

然后启动webpack-dev-server即可:

webpack-dev-server

默认监听8080端口,因此浏览器直接打开http://localhost:8080即可看到结果页面。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 监听文件改动并实时构建,避免每次改动都要手动构建才能看到效果。在 webpack 中添加 --watch 开启监视...
    赛亚人之神阅读 241评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,837评论 18 139
  • 构建一个小项目——FlyBird,学习webpack和react。(本文成文于2017/2/25) 从webpac...
    布蕾布蕾阅读 16,854评论 31 98
  • 目录第1章 webpack简介 11.1 webpack是什么? 11.2 官网地址 21.3 为什么使用 web...
    lemonzoey阅读 1,751评论 0 1
  • 简介: 女主一:夏芬芬 性格:开朗—冷酷,残忍 身份:孤儿(黑帮界第一杀手,魅) 女主二:雪芳( 芳儿 ) 性格:...
    茉莉红尘阅读 416评论 0 2