当前播放: 19 | webpack中的热更新及原理分析
00:00 / 00:00
高清
  • 高清
1.0x
  • 2.0x
  • 1.5x
  • 1.25x
  • 1.0x
  • 0.5x
网页全屏
全屏
00:00
付费课程,可试看
课程目录
第一章:webpack与构建发展简史 (9讲)
01 | 课程介绍
免费
02 | 内容综述
免费
03 | 为什么需要构建工具
免费
04 | 前端构建演变之路
05 | 为什么选择webpack
06 | 初识webpack
07 | 环境搭建:安装webpack
免费
08 | webpack初体验:一个最简单的例子
09 | 通过npm script运行webpack
第二章:webpack基础用法 (12讲)
10 | webpack核心概念之entry
免费
11 | webpack核心概念之output
免费
12 | webpack核心概念之loaders
13 | webpack核心概念之plugins
14 | webpack核心概念之mode
15 | 解析ECMASCript 6和React JSX
16 | 解析CSS、Less和Sass
17 | 解析图片和字体
18 | webpack中的文件监听
19 | webpack中的热更新及原理分析
20 | 文件指纹策略:chunkhash、contenthash和hash
21 | HTML 、CSS和JavaScript代码压缩
第三章:webpack进阶用法 (16讲)
22 | 自动清理构建目录产物
23 | PostCSS插件autoprefixer自动补齐CSS3前缀
24 | 移动端CSS px自动转换成rem
25 | 静态资源内联
26 | 多页面应用打包通用方案
27 | 使用sourcemap
28 | 提取页面公共资源
29 | Tree Shaking的使用和原理分析
30 | Scope Hoisting使用和原理分析
31 | 代码分割和动态import
32 | 在webpack中使用ESLint
33 | webpack打包组件和基础库
34 | webpack实现SSR打包(上)
35 | webpack实现SSR打包(下)
36 | 优化构建时命令行的显示日志
37 | 构建异常和中断处理
第四章:编写可维护的webpack构建配置 (9讲)
38 | 构建配置包设计
39 | 功能模块设计和目录结构
40 | 使用ESLint规范构建脚本
41 | 冒烟测试介绍和实际运用
42 | 单元测试和测试覆盖率
43 | 持续集成和Travis CI
44 | 发布构建包到npm社区
45 | Git Commit规范和changelog生成
46 | 语义化版本(Semantic Versioning)规范格式
第五章:webpack构建速度和体积优化策略 (12讲)
47 | 初级分析:使用webpack内置的stats
48 | 速度分析:使用speed-measure-webpack-plugin
49 | 体积分析:使用webpack-bundle-analyzer
50 | 使用高版本的webpack和Node.js
51 | 多进程/多实例构建
52 | 多进程并行压缩代码
53 | 进一步分包:预编译资源模块
54 | 充分利用缓存提升二次构建速度
55 | 缩小构建目标
56 | 使用Tree Shaking擦除无用的JavaScript和CSS
57 | 使用webpack进行图片压缩
58 | 使用动态Polyfill服务
第六章:通过源代码掌握webpack打包原理 (9讲)
59 | webpack启动过程分析
60 | webpack-cli源码阅读
61 | Tapable插件架构与Hooks设计
62 | Tapable是如何和webpack进行关联起来的?
63 | webpack流程篇:准备阶段
64 | webpack流程篇:模块构建和chunk生成阶段
65 | webpack流程篇:文件生成
66 | 动手编写一个简易的webpack(上)
67 | 动手编写一个简易的webpack(下)
第七章:编写loader和插件 (7讲)
68 | loader的链式调用与执行顺序
69 | 使用loader-runner高效进行loader的调试
70 | 更复杂的loader的开发场
71 | 实战开发一个自动合成雪碧图的loader
72 | 插件基本结构介绍
73 | 更复杂的插件开发场景
74 | 实战开发一个压缩构建资源为zip包的插件
第八章:React全家桶和webpack开发商城项目 (10讲)
75 | 商城技术栈选型和整体架构
76 | 商城界面UI设计与模块拆分
77 | React全家桶环境搭建
78 | 数据库实体和表结构设计
79 | 登录注册模块开发
80 | 商品模块开发
81 | 订单模块开发
82 | 谈谈Web商城的性能优化策略
83 | 功能开发总结
84 | 玩转webpack & 结课测试
19 | webpack中的热更新及原理分析

19 | webpack中的热更新及原理分析

程柳锋
腾讯高级工程师,IVWEB团队社区和工程化负责人
全集7122
新人首单 ¥19.9 原价 ¥99
28
本节摘要
登录 后留言

精选留言(52)

  • der果
    老师HotModuleReplacementPlugin是做什么用的,没有手动引入也可以完成热更新。但是手动引入之后就会报错,ERROR in chunk main [entry]

    ./source2019/css/main_34800f5bbbfca82eb93c.css

    Cannot use [chunkhash] or [contenthash] for chunk in './source2019/js/[name]_[contenthash].js' (use [hash] instead)

    用的是MiniCssExtractPlugin将css单独保存

    作者回复: 这里面的热更新有最核心的是 HMR Server 和 HMR runtime。

    HMR Server 是服务端,用来将变化的 js 模块通过 websocket 的消息通知给浏览器端。

    HMR Runtime是浏览器端,用于接受 HMR Server 传递的模块数据,浏览器端可以看到 .hot-update.json 的文件过来。

    继续回到这个问题:老师HotModuleReplacementPlugin是做什么用的?

    webpack 构建出来的 bundle.js 本身是不具备热更新的能力的,HotModuleReplacementPlugin 的作用就是将 HMR runtime 注入到 bundle.js,使得bundle.js可以和HMR server建立websocket的通信连接

    2019-06-13
    1
    24
  • Mavericker
    webpack.HotModuleReplacementPlugin 没有必要加,官网文档说配置了 hot: true 会自动引入这个 plugin。

    作者回复: 嗯嗯,这里面也是出于演示 HMR Runtime

    2019-06-01
    13
  • dudustyle
    老师,webpack-dev-server 是webpack-dev-middleware的封装版,webpack-dev-middleware不详细聊一下灵活的场景嘛?
    2019-05-31
    1
    9
  • 有杀气呀
    同求上面同学的建议,webpack-dev-server和webpack-dev-middleware的详细区别,特别是使用场景,希望老师能再抽出来讲一讲
    2019-06-07
    1
    8
  • Treasure
    个人觉得,老师在讲到原理部分的时候,是不是可以语速稍微放慢一点儿(给我的感觉像是在读ppt)?
    感觉原理部分还是比较晦涩的对于新手来说,希望在学完本教程以后不只是学会webpack如何配置。
    2019-07-17
    1
    7
  • 从小就很酷
    > webpack-dev-server --open

    'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序
    或批处理文件。

    作者回复: npm i webpack-dev-server -D,安装下这个包依赖

    2019-06-05
    7
  • Zkerhcy
    老师您好!我回看了这一节,写了demo,发现修改search.js的内容浏览器还是整体会刷新,但是修改search.less的内容HMR生效、不会刷新浏览器。这是什么原因?
    2019-06-18
    3
    4
  • Zkerhcy
    HMR什么情况下会失败?我这边自己写或者用GitHub上的示例代码,每次浏览器都会整体刷新。
    2019-06-04
    2
    4
  • 驴肉蒸饺
    还是没太理解webpack-dev-server和hot-module-replacement-plugin之间的关系。
    请问老师,为什么二者不能合二为一呢,而要单独写两个包?然后用的时候又要组合来使用。目的是什么,请教老师,谢谢您。

    作者回复: 需要从两者的功能上来分析说明:

    webpack-dev-server(WDS)的功能提供 bundle server的能力,就是生成的 bundle.js 文件可以通过 localhost://xxx 的方式去访问,另外 WDS 也提供 livereload(浏览器的自动刷新)。

    hot-module-replacement-plugin 的作用是提供 HMR 的 runtime,并且将 runtime 注入到 bundle.js 代码里面去。一旦磁盘里面的文件修改,那么 HMR server 会将有修改的 js module 信息发送给 HMR runtime,然后 HMR runtime 去局部更新页面的代码。因此这种方式可以不用刷新浏览器。

    单独写两个包也是出于功能的解耦来考虑的。简单来说就是:hot-module-replacement-plugin 包给 webpack-dev-server 提供了热更新的能力。

    2019-05-31
    4
  • 小丸子
    老师,我刚刚npm run dev之前把dist删掉了,发现npm run dev不能自动生成dist(猜想是因为没有执行webpack);那日常工作如果用热更新,是不是必须先npm run build打包出dist,再执行npm run dev?
    2019-07-30
    2
  • 范饭飯
    Mavericker同学实力误导,我还特地去webpack官网看了下。“hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin”这是原文。哪里说了自动引入plugin啊?
    2019-06-08
    1
    2
  • 小果果

    'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序
    或批处理文件。
    并没有启动成功

    作者回复: 你需要在项目里面安装下这个依赖哈,

    npm i webpack-dev-server -D

    2019-06-07
    2
  • 霍进
    老师在留言的回复内容,真得很细心,能起到总结归纳的作用 666
    2020-01-29
    1
  • 我想问一下,我这边是用express + webpack-dev-middleware + webpack-hot-middleware 实现热跟新的,现在css和js可以实现,html改变前端也可以接到hmr通知,但是内容是空的,怎么实现html的热跟新呢?
    2019-12-04
    1
  • 老师 HRM Runtime 在 PDF 中好像打错了
    2019-07-18
    1
  • Geek4329
    没有自动打开浏览器,老师,讲的时候别漏步骤啊,webpack-dev-server不用安装吗?看你没安装就直接运行了,不报错?
    2020-07-12
  • 陈丽丽
    程柳锋老师,发现跟着你的视频来写代码,总是达不到跟你视频一样的效果,不是报这个错,就是报那个错。比如说:

    Cannot find module 'webpack-cli/bin/config-yargs'
    2020-06-20
    4
  • 吃不胖,不改名。
    老师我npm run dev 自动打开的浏览器提示这个Cannot GET / (学习的是19节webpack中热更新及原理分析)。
    2020-06-15
  • vnues
    注意没有出现热更新而是浏览器直接刷新是没有加了这个

    页面整体刷新是不是没有在入口文件加入这段代码
    if(module.hot){
     module.hot.accept()
    }

    而对于vue ng react他们都有对应的热更新loader
    2020-06-11
  • 孙哲
    热更新打包后 为什么我打包出来的文件 只有index.js 和search.js?
    2020-06-11
收起评论
看过的人还看
重学前端

程劭非(winter)  前手机淘宝前端负责人

58讲 | 36249 人已学习

新人首单 ¥19.9 原价 ¥99
TypeScript开发实战

梁宵  搜狗营销事业部高级架构师

47讲 | 4246 人已学习

新人首单 ¥29.9 原价 ¥129
Node.js开发实战

杨浩  腾讯高级工程师

57讲 | 5788 人已学习

新人首单 ¥29.9 原价 ¥129
浏览器工作原理与实践

李兵  前盛大创新院高级研究员

45讲 | 8831 人已学习

新人首单 ¥19.9 原价 ¥99