Chunk

webpack是一个模块打包器， 一个文件就是一个模块，而chunk是多个模块的集合，chunk不是bundle， chunk是引用模块的集合而bundle是最终输出的产物，一个chunk有可能输出多个bundle（dev模式下开启source-map的情况下）
产生chunk的三种途径

  1. entry入口
  2. 异步加载模块
  3. 代码分割（code spliting）

    Webpack构建流程

  • 初始化参数: 以 shell webpack.config.js 来获取完整的配置参数
  • 开始编译: 使用参数初始化一个Complier对象，加载所有的配置，开始执行编译
  • 确定入口: 根据entry中的配置，找出所有的入口文件
  • 编译模块: 从入口文件开始，调用所有的loader，再去递归的找依赖
  • 完成模块编译: 得到每个模块被翻译后的最终内容以及他们之间的依赖关系；依赖关系的生成主要是通过JS解析器生成AST对象，从中找出依赖关系
  • 输出资源: 根据得到的依赖关系，组装成一个个包含多个module的chunk
  • 输出完成: 根据配置，确定要输出的文件名以及文件路径

    webpack HMR原理

    hmr是热更新模块的webpack complier将对应的文件打包成了bundle.js发送给了bundler server,浏览器就可以通过访问服务器的方式获取bundle.js
    如果文件更新的话webpack compiler会重新编译，发送给hmr server,hmr会判断哪些文件哪些资源发生了变化，然后发送给hmr runtime,hmr runtime就会更新代码
    webpack-dev-server主要依靠webpack express 和websocket实现的热更新 express启动本地服务，浏览器访问时可以做响应 服务端和客户端使用的websocket实现的长连接 webpack监听源文件的变化，即当开发者保存文件时触发webpack重新编译，每次编译都会生成hash值、已改动模块的json文件、已改动模块代码的js文件,编译完成后通过socket向客户端推送当前编译的hash戳 客户端的websocket监听hash，如果不同就重新请求资源，相同走缓存