webpack模块热更新?

[xccjk]

webpack热更新

什么是浏览器的热更新

• webpack和webpack-dev-server
• 热更新包含什么
  • 保存之后自动编译(Auto Compile)
  • 自动刷新浏览器(Live Reload)
  • 模块热替换HMR(Hot Module Replacement)
• 什么是浏览器的热更新
  • 指在本地开发过程中同时打开浏览器进行效果预览，在修改代码后，浏览器自动更新页面内容。
  • 自动更新在表现上也分为：自动刷新整个页面，以及整体无刷新而只更新页面内容

手动模式

  // 1.js
  console.log(a)

  // webpack.config.basic.js
  module.exports = {
    entry: './src/1.js',
    mode: 'development'
  }

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

• 命令行中执行npm run build:basic，打包生成dist/main.js文件，命令行终止

watch

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

  // package.json
  "build:watch": "webpack --config webpack.config.watch.js"

• 命令行中执行npm run build:wathc，打包生成dist/main.js文件，命令行继续运行，修改1.js文件，重新执行打包过程，生成新的dist/main.js文件
• 存在的问题：虽然在修改代码后实时编译了，但是浏览器中的内容并没有发生改变

Live Reload

  // webpack.config.reload.js
  module.exports = {
    entry: './src/1.js',
    mode: 'development',
    watch: true,
    devServer: {
      // 为dist下静态文件提供本地服务渲染
      contentBase: './dist',
      open: true
    }
  }

  // package.json
  script: {
    ...
    "dev:reload": "webpack-dev-server --config webpack.config.reload.js"
  }

• 安装webpack-dev-server
• npm run dev:reload启动服务，dist文件新增idnex.html文件，引入打包后的js文件
• 通过设置devServer open，浏览器自动打开localhost:8080/index.html
• 修改1.js，浏览器页面内容发生改变

原理

• 通过websocket服务，对打开的网页和本地服务间建立持久化的通信

问题

• 场景：调试位于某个靠后的流程，保存了修改后页面刷新了，需要重新操作一遍

Hot Module Replacement - 模块热替换

• 为了解决页面刷新导致的状态丢失问题

  // 1.js
  import './style.css'
  ...

  // style.css
  div {
    color: red
  }

  // webpack.config.hmr.js
  // 添加devServer hot与css解析器style-loader与css-loader
  module.exports = {
    entry: './src/index-0.js',
    mode: 'none',
    watch: true,
    devServer: {
      // 为dist下静态文件提供本地服务渲染
      contentBase: './dist',
      open: true,
      hot: true
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        }
      ]
    }
  }

  package.json
  script: {
    ...
    "dev:hmr": "webpack-dev-server --config webpack.config.hmr.js"
  }

• 安装css解析npm install style-loader css-loader
• css-loader是将文件转换为模块，style-loader是将css内容添加到页面的style标签
• 运行npm run dev:hmr，浏览器查看发现head下面多了个style标签
• 修改style.css内容，浏览器中也发生变化
  • 浏览器network中新增两个请求：.hot-update.json与.hot-update.js
  • 不会刷新页面重载所有请求

问题

1. 为什么修改js不能模拟出热替换的效果？

• 修改js文件时，也会生成.hot-update.json与.hot-update.js，然后就会重载所有请求

webpack热更新原理

• watch: 对本地代码内容改变的监听
• reload: 浏览器端与本地服务器端的websocket通信
• hmr: 模块解析与替换功能

webpack的打包流程

• module: 模块化编程中把程序分割成独立的功能与模块
• chunk: 按模块间引用关系组合成的代码块，一个chunk可以包含多个module
• chunk group: 配置的入口点(entry point)区分的快组，一个chunk group包含一个到多个chunk
• buildling: webpack打包过程
• asset/bundle: 打包产物

打包思想

• 一切源代码都可以通过各种loader转换为js模块(module)，模块间可以相互引用
• webpack通过入口点(entry point)递归处理各模块引用关系，最后输出为一个或多个产物文件(bundle)
• 没一个入口点都是一个快组(chunk group)，在不考虑分包的情况下，一个chunk group中只有一个chunk，该chunk包含递归分析后的所有模块。每一个chunk都有一个打包后的输出问题(asset/bundle)