界面调试热技术如何开着飞机修引擎海量资源.pdfVIP

本文由简悦SimpRead转码，原文地址

你好，我是上一我们聊了几个典型脚手架的特点和使用，课后给大家留的思考题是在实际

项目里使用的是哪一类脚手架工具以及使用的理由，希望你能通过这个题目来思考工具之间的差异性。

这个思考的过程有助于加深我们对工具本身的细节认知，也能够锻炼技术选型的思维。

这一，我们再来聊聊前端开发过程中一个经典的提高开发效率的技术：浏览器的热更新。

什么是浏览器的热更新

看见浏览器热更新，相信你很容易想到webpack和webpack-dev-server。确实，现在各类型的脚手

架工具在创建项目时通常已配置好了开启各种优化选项的webpack，其中自然也包含了开发服务器。

大家在上手开发时，可以简单地执行npmstart(cra)或npmrunserve(vuecli)，就能体验到热更新的

效果。

但是在我过去担任中高级前端岗位的面试官时，经常发现很多来面试的同学对于到底什么是热更新都很

难讲清楚，热更新是保存后自动编译（AutoCompile）吗？还是自动刷新浏览器（LiveReload）？还

是指HMR（HotModuleReplacement，模块热替换）？这些不同的效果背后的技术原理是什么呢？

今天我们就来回答下这些问题。

先来看下，究竟什么是浏览器的热更新。浏览器的热更新，指的是我们在本地开发的同时打开浏览器进

行预览，当代码文件发生变化时，浏览器自动更新页面内容的技术。这里的自动更新，表现上又分为自

动刷新整个页面，以及页面整体无刷新而只更新页面的部分内容。

与之相对的是在早期开发流程中，每次代码变更后需要手动刷新浏览器才能看到变更效果的情况。甚至

于，代码变更后还需要手动执行打包，完成编译打包后再刷新浏览器。而使用浏览器的热更新，可

以大大减少这些麻烦。

webpack中的热更新配置

下面我们就以webpack工具为例，来看下四种不同配置对结果的影响（完整示例代码

fficiency/lessonsfeefficiency/02webpackhmr）。

一切依赖手动

首先来看第一个最简单的配置，在js中我们简单地打印一个文本，然后在构建配置里只有最简单的

entry和mode配置。

src/index0.js

functionrender(){

div=document.createElement(div)

div.innerHTML=HelloWorld0;

document.body.appendChild(div)

}

render()

webpack.config.basic.js

module.exports={

entry:./src/index0.js,

mode:development,

}

package.json

scripts:{

build:basic:webpack--configwebpack.config.basic.js

}

当我们执行npmrunbuild:basic时，webpack将entry中的源文件index0.js打包为dist/main.js，

并进程。流程很简单，但是如果我们接下来改动了源文件的输出文本，会发现由于构建配置中没有

任何对应处理，所以在保存后，打包后的文件内容并没有更新。为了同步改动效果，我们需要再次手动

执行该命令。

Watch模式

第二种配置是watch模式。为了摆脱每次修改文件后都需要手动执行才能进行编译的问题，

webpack中增加了watch模式，通过源码文件的变化来解决上面不能自动编译问题。我们可以在

配置中增加watch:true，如下：

webpack.config.watch.js

{...

watch:true

...}

package.json

scripts:{

build:watch:webpack--configwebpack.config.watch.js

}

当我们执行npmrunbuild:watch，webpack同样执行一次打程，但在打包结束后并未当前

进程，而是继续源文件内容是否发生