专栏首页热爱IT深入浅出webpack学习1--使用DevServer

深入浅出webpack学习1--使用DevServer

使用DevServer

在日常开发中,我们可能需要以下几个功能:

1. 提供HTTP服务而不是使用本地文件预览;
2. 监听文件变化并自动刷新网页, 做到实时预览;
3. 支持Source Map, 以方便调试;

webpack的原生支持上述2、3点内容,再结合官方提供的开放工具DevServer也可以很方便的做到第一点。DevServer会启动一个HTTP服务器用于服务网页请求,同时会帮助启动webpack,并接收webpack发出的文件变更信号,通过websocket协议自动刷新网页做到实时预览。

安装DevServer:

npm i -D webpack-dev-server

安装完成后,执行webpack-dev-server命令,DevServer就启动了。可以在控制台中看到:

Project is running at http://localhost:8080/
webpack output is served from /

这意味着DevServer启动的HTTP服务监听在http://localhost: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对应的index.html应该修改为:

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
<**加粗文字**div id="app"></div>
<!--导入 DevServer 输出的 JavaScript 文件-->
<script src="bundle.js"></script>
</body>
</html>

实时预览

按照上面的步骤,你可以试试修改main.js main.css main.js中的任何文件,保存后你会发现浏览器会自动刷新,运行出修改后的效果。

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

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

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

模块热替换

除了通过重新刷新整个网页来实现实时预览,DevServer还有一种被称作模块热替换的刷新技术。模块热替换能做到在不重新加载整个网页的情况下,通过将被更新过的模块替换老的模块。再重新执行一次来实现实时预览。模块热替换相对于默认的刷新机制能提供更快的响应和更好的开发体验。模块热替换默认是关闭的,要开启模块热替换,只需要在启动DevServer时带上--hot参数,重启DevServer后再去更新文件就能体验到模块热替换的乐趣了。

支持Source Map

在浏览器中运行的JavaScript代码都是编译器输出的代码,这些代码可读性差。遇到错误不好排查,我们可以通过source Map,在启动的时候带上 --devtool source-map参数就可以了。

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 解决vue本地环境跨域请求正常,版本打包后跨域代理不起作用,请求不到数据的方法

    问题:在本地使用了proxyTable代理可以正常跨域请求后台数据,打包上传后就无法获得后台的json文件。查看了相关资料可以用nginx进行解决。还可以使用命...

    双面人
  • 深入浅出webpack学习2--配置DevServer

    上一章介绍过DevServer可以用来提高开发效率,它提供一些配置可以改变DevServer的默认行为。要配置DevServer除了在配置文件里通过devSer...

    双面人
  • PostgreSQL给模糊搜索加索引 转

    PostgrSQL有个模块叫pg_trgm,可以对字符串来进行比较相似度,并通过加GIST或者GIN索引来达到提速的效果。在一般的RDBMS中这种需求都会进行全...

    双面人
  • 网页中添加悬浮窗

    木尤
  • LeetCode 13. 罗马数字转整数

    字符 数值 I 1 V 5 X 10 L ...

    freesan44
  • 进行直播间搭建时需要注意的小细节

    通常我们在进行直播间搭建的过程中,除了考虑技术是否到位以外,还需要考虑的就是搭建完成后用户体验是否会受到影响。本文主要是针对直播过程经常容易出现的延时问题,进行...

    奶茶源码技术小白
  • 从人到电子人的科技之路|洞见

    刘彩红 ThoughtWorks 2016年5月底,ThoughtWorks在纽约办公室再次倾听并访问了艺术家Neil Harbisson和Moon Riba...

    ThoughtWorks
  • JavaScript设计模式之工厂模式

    为了避免这类错误的发生,在构造函数开始时先判断当前对象this指代的是不是类(Demo)。

    FinGet
  • KDD 2019 | 不用反向传播就能训练DL模型,ADMM效果可超梯度下降

    论文:ADMM for Efficient Deep Learning with Global Convergence

    机器之心
  • ROS和CAN的一些资料

    1. ROS Control and CAN interface on a custom robot

    zhangrelay

扫码关注云+社区

领取腾讯云代金券