随笔｜闲扯前端工程化③---浏览器的热更新随笔｜闲扯前端工程化③---浏览器的热更新上一节咱们简单了解了脚手架的相关知

随笔｜闲扯前端工程化③---浏览器的热更新

上一节咱们简单了解了脚手架的相关知识，比较了两个脚手架的异同之处，以及简单介绍了如何去定制脚手架。

对脚手架的认识加深有助于我们能够快速进行技术选型，锻炼我们的技术选型思维，提升开发效率。

说到效率，就不得不提一下热更新技术，相对于每次修改完代码都需要刷新页面，热更新技术可以自动刷新界面，妥妥的提高我们的效率。

而说到热更新，我们很容易想到webpack、以及webpack-dev-server，现在的脚手架在创建项目时基本上都已经配置好了，我们可以直接启动项目进行开发。

但是，到底什么是热更新？

是保存修改后的代码然后进行编译？还是说只是简单的刷新浏览器呢？或者是不同的模块进行替换呢？

实际上，浏览器的热更新指的是我们在进行本地开发时，当代码文件发生变化时，浏览起自动更新界面内容的这么一个技术。

而刷新页面有分为两种。一种是自动刷新整个页面，另一种是只刷新部分界面内容。

早期的开发流程，每次我们修改代码后，都需要手动刷新浏览器才能看到变更后的效果，甚至是改了代码之后，需要手动编译代码打包后再刷新浏览器，而热更新就是为了解决这个问题。

我们以webpack的配置为例：

// src/index.js

function render(){
div = document.createlement('div')
div.innerhtml = "test"
document.body.appendchild(div)

}
render()

// webpack.config.basic.js

module.exports = {
  entry:'./src/index.js',
  mode:'development'
}

// package.json
{
  "scripts":{
    "build:basic":"webpack --config webpack.config.basic.js"
  }
}

入口文件中简单打印一个文本，然后在配置里只有最简单的entry 和 mode, 当我们执行build:basic的时候，webpack会将index.js打包到dist中，过程非常简单。

但是当我们改动index.js 文件之后，我们会发现，由于我们的配置没有其他处理，修改保存后，打包内容并没有进行更新，我们需要重新进行build。

要解决这个问题，这就需要我们再加一个配置:

module.exports = {
  entry:'./src/index.js',
  mode:'development',
  watch:true
}

加上watch配置之后，webpack可以监听到源文件的变化，就可以进行自动编译，我们就不用每次去手动执行打包的脚本。

但是，问题并没有解决，我们还需要在浏览器中进行预览，这个时候还是需要我们手动刷新才能看到效果。

这就需要增加新的配置live reload，当代码修改后使浏览器能够自动显示最新的效果，从而避免手动刷新。

这就需要有一种通信机制将浏览器和本地监听代码变更的逻辑联系起来。在webpack 中，提供了devServer来解决这个问题。

// webpack.config.basic.js

module.exports = {
 devServer:{
   contentBase:'./dist',
   open:true
 }
}
// package.json
{
  "scripts":{
    "dev":"webpack-dev-server --config webpack.config.js"
  }
}

当我们执行npm run dev 后，就可以看到加载的界面。

与此同时我们还可以看到一个websocket链接：

正式有了这个websocket在网页和本地服务之间建立了一个通信机制，当代码发生变化时，通过socket通知页面进行更新。

但是还有一种情况是，当我们修改代码之后，会发现页面上之前的内容或者状态都回到了最原始的状态，我们又得重新操作一遍才能最终确认界面效果。

对于这个问题，就需要用到模块热替换也就是hmr。

// src/inde.js
import './index.css'

// index.css

.header{
  background:bule
}
...


// webpack.config.hmr.js

module.exports = {
 devServer:{
   contentBase:'./dist',
   ...
   open:true,
   ...
   hot:true,
 },
 module:{
   rules:[
     {
       test:/.css/,
       use:['style-loader','css-loader']
     }
   ]
 }
}
// package.json
{
  "scripts":{
    "dev":"webpack-dev-server --config webpack.config.hmr.js"
  }
}