Webpack 热更新原理

时间  2021-08-12
标签 javascript html vue java node react jquery webpack git github 栏目 JavaScript 繁體版
原文   原文链接

用过 webpack 的同窗应该都知道，有一个特别好用的『热更新』，在不刷新页面的状况下，就能将代码推到浏览器。javascript

热更新

今天的文章将会探寻一下 webpack 热更新的秘密。html

如何配置热更新

咱们先安装一些咱们须要的包：vue

npm i webpack webpack-cli -D
npm i webpack-dev-server -D
npm i html-webpack-plugin -D
复制代码

而后，咱们须要弄明白，webpack 从版本 webpack@4 以后，须要经过 webpack CLI 来启动服务，提供了打包的命令和启动开发服务的命令。java

# 打包到指定目录
webpack build --mode production --config webpack.config.js
# 启动开发服务器
webpack serve --mode development --config webpack.config.js
复制代码
// pkg.json
{
  "scripts": {
    "dev": "webpack serve --mode development --config webpack.config.js",
    "build": "webpack build --mode production --config webpack.config.js"
  },
  "devDependencies": {
    "webpack": "^5.45.1",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2",
    "html-webpack-plugin": "^5.3.2",
  }
}
复制代码

在启动开发服务的时候，在 webpack 的配置文件中配置 devServe 属性，便可开启热更新模式。node

// webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    hot: true, // 开启热更新
    port: 8080, // 指定服务器端口号
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ]
}
复制代码

配置完毕后，咱们能够开始按下面的目录结构新建文件。react

├── src
│   ├── index.js
│   └── num.js
├── index.html
├── package.json
└── webpack.config.js
复制代码

这里由于须要对 DOM 进行操做，为了方便咱们直接使用 jQuery （yyds），在 HTML 文件中引入 jQuery 的 CDN。jquery

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Webpack Demo</title>
  <script src="https://unpkg.com/jquery@3.6.0/dist/jquery.js"></script>
</head>
<body>
  <div id="app"></div> 
</body>
</html>
复制代码

而后在 index.js 中对 div#app 进行操做。webpack

// src/index.js
import { setNum } from './num'

$(function() {
  let num = 0
  const $app = $('#app')
  $app.text(`同步修改结果: ${num}`)

  setInterval(() => {
    num = setNum(num) // 调用 setNum 更新 num 的值
    $app.text(`同步修改结果: ${num}`)
  }, 1e3)
})
复制代码

这里每秒调用一次 setNum 方法，更新变量 num 的值，而后修改 div#app 的文本。setNum 方法在 num.js 文件中，这里就是咱们须要修改的地方，经过修改该方法，让页面直接进行热更新。git

// src/num.js
export const setNum = (num) => {
  return ++num // 让 num 自增
}
复制代码

修改 setNum 方法的过程当中，发现页面直接刷新了，并无达到预想中的热更新操做。github

官方文档中好像也没说还有什么其余的配置要作，真是让人迷惑。

最后把文档翻烂了以后，发现，热更新除了要修改 devServer 配置以外，还须要在代码中告诉 webpack 哪些模块是须要进行热更新的。

模块热替换：webpack.docschina.org/guides/hot-…

webpack 文档

同理，咱们须要修改 src/index.js，告诉 webpack src/num.js 模块是须要进行热更新的。

import { setNum } from './num'

if (module.hot) {
  //num 模块须要进行热更新
  module.hot.accept('./num')
}

$(function() {
  ……
})
复制代码

热更新

关于模块热替换更多 API 介绍能够看这里：

模块热替换(hot module replacement) -https://www.webpackjs.com/api/hot-module-replacement

若是不是像我这样手动配置 webpack，而且使用 jQuery 根本不会注意到这个配置。在一些 Loader （style-loader、vue-loader、react-hot-loader）中，都在其内部调用了 module hot api，也是替开发者省了不少心。

style-loader 热更新代码

github.com/webpack-con…

vue-loader 热更新代码

github.com/vuejs/vue-l…

热更新的原理

在讲热更新以前，咱们须要先看看 webpack 是如何打包文件的。

webpack 打包逻辑

先回顾一下前面的代码，而且把以前的 ESM 语法改为 require ，由于 webpack 内部也会把 ESM 修改为 require。

// src/index.js
$(function() {
  let num = 0
  const $app = $('#app')
  $app.text(`同步修改结果: ${num}`)
  setInterval(() => {
    num = require('./num').setNum(num)
    $app.text(`同步修改结果: ${num}`)
  }, 1e3)
})
// src/num.js
exports.setNum = (num) => {
  return --num
}
复制代码

咱们都知道，webpack 本质是一个打包工具，会把多个 js 文件打包成一个 js 文件。下面的代码是 webpack 打包后的代码：

// webpackBootstrap
(() => {
  // 全部模块打包都一个对象中
  // key 为文件名，value 为一个匿名函数，函数内就是文件内代码
  var __webpack_modules__ = ({
    "./src/index.js": ((module, __webpack_exports__, __webpack_require__) => {
      "use strict";
      $(function() {
        let num = 0
        const $app = $('#app')
        $app.text(`同步修改结果: ${num}`)
        setInterval(() => {
          num = (0,__webpack_require__("./src/num.js").setNum)(num)
          $app.text(`同步修改结果: ${num}`)
        }, 1e3)
      })
    }),

    "./src/num.js": ((module, __webpack_exports__, __webpack_require__) => {
      "use strict";
      Object.assign(__webpack_exports__, {
        "setNum": (num) => {
          return ++num
        }
      })
    })

  });

  // 内部实现一个 require 方法
  function __webpack_require__(moduleId) {
    // Execute the module function
    try {
      var module = {
        id: moduleId,
        exports: {}
      };
      // 取出模块执行
      var factory = __webpack_modules__[moduleId]
      factory.call(module.exports, module, module.exports, __webpack_require__);
    } catch(e) {
      module.error = e;
      throw e;
    }
    // 返回执行后的 exports
    return module.exports;
  }

  /*******************************************/
  // 启动
  // Load entry module and return exports
  __webpack_require__("./src/index.js");
})
复制代码

固然，上面的代码是简化后的代码，webpack 实际打包出来的代码还会有一些缓存、容错以及 ESM 模块兼容之类的代码。

咱们能够简单的模拟一下 webpack 的打包逻辑。

// build.js
const path = require('path')
const minimist = require('minimist')
const chokidar = require('chokidar')

const wrapperFn = (content) => {
  return  `function (require, module, exports) {\n ${content.split('\n').join('\n ')}\n}`
}

const modulesFn = (files, contents) => {
  let modules = 'const modules = {\n'
  files.forEach(file => {
    modules += `"${file}": ${wrapperFn(contents[file])},\n\n`
  })
  modules += '}'
  return modules
}
const requireFn = () => `const require = function(url) { const module = { exports: {} } const factory = modules[url] || function() {} factory.call(module, require, module, module.exports) return module.exports }`

const template = {
  wrapperFn,
  modulesFn,
  requireFn,
}

module.exports = class Build {
  files = new Set()
  contents = new Object()

  constructor() {
    // 解析参数
    // index: 入口 html 的模板
    // entry: 打包的入口 js 文件名
    // output: 打包后输出的 js 文件名
    const args = minimist(process.argv.slice(2))
    const { index, entry, output } = args

    this.index = index || 'index.html'
    this.entry = path.join('./', entry)
    this.output = path.join('./', output)
    this.getScript()
  }

  getScript() {
    // 从入口的 js 文件开始，获取全部的依赖
    this.files.add(this.entry)
    this.files.forEach(file => {
      const dir = path.dirname(file)
      const content = fs.readFileSync(file, 'utf-8')
      const newContent = this.processJS(dir, content)
      this.contents[file] = newContent
    })
  }

  processJS(dir, content) {
    let match = []
    let result = content
    const depReg = /require\s*\(['"](.+)['"]\)/g

    while ((match = depReg.exec(content)) !== null) {
      const [statements, url] = match
      let newUrl = url
      // 不存在文件后缀时，手动补充后缀
      if (!newUrl.endsWith('.js')) {
        newUrl += '.js'
      }

      newUrl = path.join(dir, newUrl)
      // 将 require 中的相对地址替换为绝对地址
      let newRequire = statements.replace(url, newUrl)
      newRequire = newRequire.replace('(', `(/* ${url} */`)
      result = result.replace(statements, newRequire)
      this.files.add(newUrl)
    }

    return result
  }

  genCode() {
    let outputJS = ''
    outputJS += `/* all modules */${template.modulesFn(this.files, this.contents)}\n`
    outputJS += `/* require */${template.requireFn()}\n`
    outputJS += `/* start */require('${this.entry}')\n`

    return outputJS
  }
}
复制代码
// index.js
const fs = require('fs')
const Build = require('./build')
const build = new Build()

// 生成打包后的代码
const code = build.genCode()
fs.writeFileSync(build.output, code)
复制代码

启动代码：

node index.js --entry ./src/index.js --output main.js
复制代码

生成后的代码以下所示：

/* 全部的模块都会放到一个对象中。 对象的 key 为模块的文件路径； 对象的 value 为一个匿名函数； */
const modules = {
  "src/index.js": function (require, module, exports) {
    $(function() {
      let num = 0
      const $app = $('#app')
      $app.text(`同步修改结果: ${num}`)
      setInterval(() => {
        num = require('./num').setNum(num)
        $app.text(`同步修改结果: ${num}`)
      }, 1e3)
    })
  },

  "src/num.js": function (require, module, exports) {
    exports.setNum = (num) => {
      return ++num
    }
  },
}

/* 内部实现一个 require 方法，从 modules 中获取对应模块， 而后注入 require、module、exports 等参数 */
const require = function(url) {
  const module = { exports: {} }
  const factory = modules[url] || function() {}
  factory.call(module, require, module, module.exports)
  return module.exports
}

/* 启动入口的 index.js */
require('src/index.js')
复制代码

webpack 打包除了将全部 js 模块打包到一个文件外，引入 html-webpack-plugin 插件，还会将生成的 output 自动插入到 html 中。

new HtmlWebpackPlugin({
  template: './index.html'
})
复制代码

这里咱们也在 build.js 中新增一个方法，模拟下这个行为。

module.exports = class Build {
  constructor() {
    ……
  }
  genIndex() {
    const { index, output } = this
    const htmlStr = fs.readFileSync(index, 'utf-8')
    const insertIdx = htmlStr.indexOf('</head>')
    const insertScript = `<script src="${output}"></script>`
    // 在 head 标签内插入 srcript 标签
    return htmlStr.slice(0, insertIdx) + insertScript + htmlStr.slice(insertIdx)
  }
}
复制代码

要完成热更新，webpack 还须要本身启动一个服务，完成静态文件的传输。咱们利用 koa 启动一个简单的服务。

// index.js
const koa = require('koa')
const nodePath = require('path')

const Build = require('./build')
const build = new Build()

// 启动服务
const app = new koa()
app.use(async ctx => {
  const { method, path } = ctx
  const file = nodePath.join('./', path) 
  if (method === 'GET') {
    if (path === '/') {
      // 返回 html
      ctx.set(
        'Content-Type',
        'text/html;charset=utf-8'
      )
      ctx.body = build.genIndex()
      return
    } else if (file === build.output) {
      ctx.set(
        'Content-Type',
        'application/x-javascript;charset=utf-8'
      )
      ctx.body = build.genCode()
      return
    }
  }
  ctx.throw(404, 'Not Found');
})

app.listen(8080)
复制代码

启动服务后，能够看到页面正常运行。

node index.js --entry ./src/index.js --output main.js
复制代码

热更新的实现

webpack 在热更新模式下，启动服务后，服务端会与客户端创建一个长连接。文件修改后，服务端会经过长连接向客户端推送一条消息，客户端收到后，会从新请求一个 js 文件，返回的 js 文件会调用 webpackHotUpdatehmr 方法，用于替换掉 __webpack_modules__ 中的部分代码。

经过实验能够看到，热更新的具体流程以下：

  1. Webpack Server 与 Client 创建长连接；
  2. Webpack 监听文件修改，修改后经过长连接通知客户端；
  3. Client 从新请求文件，替换 __webpack_modules__ 中对应部分；

创建长连接

Server 与 Client 之间须要创建长连接，能够直接使用开源方案的 socket.io 的方案。

// index.js
const koa = require('koa')
const koaSocket = require('koa-socket-2')

const Build = require('./build')
const build = new Build()

const app = new koa()
const socket = new koaSocket()

socket.attach(app) // 启动长连接服务

app.use(async ctx => {
  ………
}
……

// build.js
module.exports = class Build {
  constructor() {
    ……
  }
  genIndex() {
    ……
    // 新增 socket.io 客户端代码
    const insertScript = ` <script src="/socket.io/socket.io.js"></script> <script src="${output}"></script> `
    ……
  }
  genCode() {
    let outputJS = ''
    ……
    // 新增代码，监听服务端推送的消息
    outputJS += `/* socket */ const socket = io() socket.on('updateMsg', function (msg){ // 监听服务端推送的消息 })\n`
    ……
  }
}
复制代码

监听文件修改

前面实现 build.js 的时候，经过 getScript() 方法，已经收集了全部的依赖文件。这里只须要经过 chokidar 监听全部的依赖文件便可。

// build.js
module.exports = class Build {
  onUpdate = function () {}
  constructor() {
    ……
    // 获取全部js依赖
    this.getScript()
    // 开启文件监听
    this.startWatch()
  }
  startWatch() {
    // 监听全部的依赖文件
    chokidar.watch([...this.files]).on('change', (file) => {
      // 获取更新后的文件
      const dir = path.dirname(file)
      const content = fs.readFileSync(file, 'utf-8')
      const newContent = this.processJS(dir, content)
      // 将更新的文件写入内存
      this.contents[file] = newContent
      this.onUpdate && this.onUpdate(file)
    })
  }
  onWatch(callback) {
    this.onUpdate = callback
  }
}
复制代码

在文件修改后，重写了 build.contents 中的文本内容，而后会触发 onUpdate 方法。因此，咱们启动服务时，须要把实现这个方法，每次触发更新的时候，须要向客户端进行消息推送。

// index.js
const koa = require('koa')
const koaSocket = require('koa-socket-2')

const Build = require('./build')
const build = new Build()
const app = new koa()
const socket = new koaSocket()

// 启动长连接服务
socket.attach(app)

// 文件修改后，向全部的客户端广播修改的文件名
build.onWatch((file) => {
  app._io.emit('updateMsg', JSON.stringify({
    type: 'update', file
  }));
})
复制代码

请求更新模块

客户端收到消息后，请求须要更新的模块。

// build.js
module.exports = class Build {
  genCode() {
    let outputJS = ''
    ……
    // 新增代码，监听服务端推送的消息
    outputJS += `/* socket */ const socket = io() socket.on('updateMsg', function (msg){ const json = JSON.parse(msg) if (json.type === 'update') { // 根据文件名，请求更新的模块 fetch('/update/'+json.file) .then(rsp => rsp.text()) .then(text => { eval(text) // 执行模块 }) } })\n`
    ……
  }
}
复制代码

而后在服务端中间件内处理 /update/ 相关的请求。

app.use(async ctx => {
  const { method, path } = ctx
  
  if (method === 'GET') {
    if (path === '/') {
      // 返回 html
      ctx.body = build.genIndex()
      return
    } else if (nodePath.join('./', path) === build.output) {
      // 返回打包后的代码
      ctx.body = build.genCode()
      return
    } else if (path.startsWith('/update/')) {
      const file = nodePath.relative('/update/', path)
      const content = build.contents[file]
      if (content) {
        // 替换 modules 内的文件
        ctx.body = `modules['${file}'] = ${ template.wrapperFn(content) }`
        return
      }
    }
  }
}
复制代码

最终效果：

完整代码

👉 Shenfq/hrm

🔗 https://github.com/Shenfq/hmr

总结

此次本身凭感受实现了一把 HMR，确定和 Webpack 真实的 HMR 仍是有一点出入，可是对于理解 HMR 的原理仍是有一点帮助的，但愿你们阅读文章后有所收获。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程