使用 DevServer

提供 HTTP 服务而不是使用本地文件预览

监听文件的变化并自动刷新网页,做到实时预览

支持 Source Map,以方便调试

  对于这些,Webpack 都为我们考虑好了。Webpack 原生支持上述第 2、3 点内容,再结合官方提供的开发工具 DevServer 也可以很方便做到第 1 点。DevServer 会启动一个 HTTP 服务器用于服务网页请求,同时会帮助自动 Webpack,并接受 Webpack 发出的文件变更信号,通过 WebSocket 协议自动刷新网页做到实时预览。

  这意味着 DevServer 启动的 HTTP 服务器监听在 8080 端口,DevServer 启动后会一直驻留在后台保持运行,访问这个网址,就能获取项目根目录下的  index.html 了。用浏览器打开这个地址时我们会发现页面空白,错误原因是 ./dist/bundle.js 加载404了。同时我们会发现并没有文件输出到 dist 目录,原因是 DevServer 会将 Webpack 构建的文件保存在内存中,在要访问输出的文件时,必须通过 HTTP 服务访问。 由于 DevServer 不会理会 webpack.config.js 里配置的 output.path 属性,所以要获取 bundle.js 的正确 URL 是 http://localhost:8080/bundle.js

  Webpack 在启动时可以开启监听模式,之后 Webpack 会监听本地文件系统的变化,在发生变化时重新构建出新结果。 Webpack 默认关闭监听模式,我们可以在启动 Webpack 时通过 --watch 来开启监听模式。

  通过 DevServer 启动的 Webpack 会开启监听模式,当发生变化时重新执行构建,然后通知 DevServer。DevsServer 会让 Webpack 在构建出的 JavaScript 代码里注入一个代理客户端用于控制网页,网页和 DevServer 之间通过 WebSocket 协议通信,以方便 DevServer 主动向客户端发送指令。DevServer 在收到来自 Webpack 的文件变化通知时,通过注入的客户端控制网页刷新。

  如果尝试修改 index.html 文件并保存,则我们会发现这并不会触发以上机制,导致这个问题的原因是 Webpack 在启动时会以配置里的 entry 为入口去递归解析出 entry 所依赖的文件,只有 entry 本身和依赖的文件才会被 Webpack 添加到监听列表里。而 index.html 文件是脱离了 JavaScript 模块化系统的,所以 Webpack 不知道它的存在。

支持 Source Map

  在浏览器中运行的 JavaScript 代码都是编译器输出的代码,这些代码的可读性很差。如果在开发过程中遇到一个不知道原因的 Bug,则我们可能需要通过断点调试去找出问题。在编译器输出的代码上进行断电调试是一件辛苦和不优雅的事情,调试工具可以通过 Source Map 映射代码,让我们在源代码上断点调试。Webpack 支持生成 Source Map,只需要在启动时带上 --devtool source-map 参数。重启 DevServer 后刷新页面,在打开 Chrome 浏览器的开发者工具,就可以在 Sources 栏中看到可调试的源代码了

webpack-dev-server 小记 原理介绍 概念解读的更多相关文章

  1. 笔记:配置 webpack dev server

    笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 ...

  2. [Webpack] Access Webpack Dev Server from Mobile Safari on an iPhone

    Testing your sites on mobile devices is a critical part of the development process. Webpack dev serv ...

  3. 配置Webpack Dev Server 实战操作方法步骤

    本文摘要:配置 Webpack Dev Server 可以解决本地开发前端应用时,手动执行 webpack 命令或 yarn build 命令,再去浏览器中访问 dist/index.html 的麻烦 ...

  4. 【转】Spark History Server 架构原理介绍

    [From]https://blog.csdn.net/u013332124/article/details/88350345 Spark History Server 是spark内置的一个http ...

  5. webpack dev server 和 sublime text 配合时需要注意的地方

    参考:https://webpack.js.org/guides/development/ Adjusting Your Text Editor Some text editors have a &q ...

  6. webpack dev server 配置 启动项目报错Error: listen EADDRINUSE

    Error: listen EADDRINUSE 0.0.0.0:5601 它的意思是,端口5601被其他进程占用. 切换端口即可解决问题

  7. LDAP概念和原理介绍

    LDAP概念和原理介绍 相信对于许多的朋友来说,可能听说过LDAP,但是实际中对LDAP的了解和具体的原理可能还比较模糊,今天就从“什么是LDAP”.“LDAP的主要产品”.“LDAP的基本模型”.“ ...

  8. T-SQL查询进阶--理解SQL Server中索引的概念,原理以及其他

    简介 在SQL Server中,索引是一种增强式的存在,这意味着,即使没有索引,SQL Server仍然可以实现应有的功能.但索引可以在大多数情况下大大提升查询性能,在OLAP中尤其明显.要完全理解索 ...

  9. 理解SQL Server中索引的概念,原理

    转自:http://www.cnblogs.com/CareySon/archive/2011/12/22/2297568.html 简介 在SQL Server中,索引是一种增强式的存在,这意味着, ...

随机推荐

  1. php如何判断 0.0/0.00/0.000 是否为空? 测试过用empty函数不行

    if ( (int) $number == 0) echo 'empty'; if ( floatval($number) == 0 ) echo 'empty' 首先,PHP 认为 0.0 是空,同 ...

  2. IDisposeable 最佳实现

    public class MyClass : IDisposable { #region 变量声明 // 指向外部非托管资源 private IntPtr handle; // 此类使用的其它托管资源 ...

  3. LINUX 蓝牙耳机的配置方法

    由于经常使用SKYPE聊天打电话,一直觉得被拴在电脑前面不是很自由,终于在一个周末,一激动买了一个蓝牙耳机.经过几天的努力在Linux/Debian上用了起来,现在就把这个配置过程和大家分享. 第一 ...

  4. win10 uwp 异步转同步

    原文:win10 uwp 异步转同步 有很多方法都是异步,那么如何从异步转到同步? 可以使用的方法需要获得是否有返回值,返回值是否需要. 如果需要返回值,使用GetResults 如从文件夹获取文件: ...

  5. asp.net下ueditor上传大容量视频报http请求错误的解决方法

    故障现象: 当使用百度编辑器ueditor上传大容量视频或大容量图片的时候,编辑器报“http请求错误”的解决方法详解: 原因分析: 目前很多CMS整合了百度的ueditor编辑器,但是上传稍微大一点 ...

  6. 【JS 笔记】比较操作符之大小与记录

    1,字符串比较 字符串比较则是使用基于标准字典的 Unicode 值来进行比较的. 对于两个拥有相同字符顺序,相同长度,并且每个字符的位置都匹配的字符串,应该使用严格比较运算符. 下例的比较中可能因为 ...

  7. 中芯国际在CSTIC上悉数追赶国际先进水平的布局

    作为中国最大.工艺最先进的晶圆厂,中芯国际的一举一动都会受到大家的关注.在由SEMI主办的2017’中国国际半导体技术大会(CSTIC 2017)上,中芯国际CEO邱慈云博士给我们带来了最新的介绍. ...

  8. VS2010使用c++、gSOAP创建WebService 图文教程

    VS2010使用c++.gSOAP创建的WebService 图文教程 环境 操作系统:Windows 7gsoap版本:2.8.32C++编译器/开发环境:Visual Studio 2010 gS ...

  9. Visual C++ 异常(Exception)常见问题 (原文标题:A Visual C++ Exception FAQ)

    Visual C++ 异常(Exception)常见问题 版权:Doug Harrison 2001 – 2007 翻译:magictong(童磊) 2011年3月 原文地址:http://membe ...

  10. 说说IEnumerable和yield

    IEnumerable数据类型是我比较喜欢的数据类型,特别是其强类型IEnumerable<T>更获得Linq的支持使得代码看起来更加优雅.整洁. 编写返回值为IEnumerable(或I ...