课件和源代码下载地址

精选留言(41)

• 
  der果

  2019-06-13

  老师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的通信连接

   1

   13
• 
  Mavericker

  2019-06-01

  webpack.HotModuleReplacementPlugin 没有必要加，官网文档说配置了 hot: true 会自动引入这个 plugin。

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

  

   9
• 
  dudustyle

  2019-05-31

  老师，webpack-dev-server 是webpack-dev-middleware的封装版，webpack-dev-middleware不详细聊一下灵活的场景嘛？

  

   8
• 
  有杀气呀

  2019-06-07

  同求上面同学的建议，webpack-dev-server和webpack-dev-middleware的详细区别，特别是使用场景，希望老师能再抽出来讲一讲

  

   6
• 
  从小就很酷

  2019-06-05

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

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

  

   6
• 
  Zkerhcy

  2019-06-04

  HMR什么情况下会失败？我这边自己写或者用GitHub上的示例代码，每次浏览器都会整体刷新。

   1

   4
• 
  Zkerhcy

  2019-06-18

  老师您好！我回看了这一节，写了demo，发现修改search.js的内容浏览器还是整体会刷新，但是修改search.less的内容HMR生效、不会刷新浏览器。这是什么原因？

   1

   3
• 
  Treasure

  2019-07-17

  个人觉得，老师在讲到原理部分的时候，是不是可以语速稍微放慢一点儿（给我的感觉像是在读ppt)？
  感觉原理部分还是比较晦涩的对于新手来说，希望在学完本教程以后不只是学会webpack如何配置。

  

   2
• 
  范饭飯

  2019-06-08

  Mavericker同学实力误导，我还特地去webpack官网看了下。“hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin”这是原文。哪里说了自动引入plugin啊？

   1

   2
• 
  源

  2019-12-04

  我想问一下，我这边是用express + webpack-dev-middleware + webpack-hot-middleware 实现热跟新的，现在css和js可以实现，html改变前端也可以接到hmr通知，但是内容是空的，怎么实现html的热跟新呢？

  

   1
• 
  小丸子

  2019-07-30

  老师，我刚刚npm run dev之前把dist删掉了，发现npm run dev不能自动生成dist（猜想是因为没有执行webpack）;那日常工作如果用热更新，是不是必须先npm run build打包出dist，再执行npm run dev？

  

   1
• 
  南

  2019-07-18

  老师 HRM Runtime 在 PDF 中好像打错了

  

   1
• 
  小果果

  2019-06-07

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

  作者回复: 你需要在项目里面安装下这个依赖哈，
  
  npm i webpack-dev-server -D

  

   1
• 
  QG

  2019-11-09

  最后的your js code指的是浏览器运行的代码吗？

  

  
• 
  QG

  2019-11-09

  不理解8和B为什么是双向箭头

  

  
• 
  Geek_185c7d

  2019-11-01

  老师，我在主入口文件 输入
  if(module.hot) {
    module.hot.accept()
  }
  为什么控制台，打印：
  [WDS] App updated. Recompiling...
  reloadApp.js:19 [WDS] App hot update...
  log.js:21 [HMR] Checking for updates on the server...
  log.js:21 [HMR] Updated modules:
  log.js:21 [HMR] - ./src/hello.js
  log.js:21 [HMR] - ./src/index.js
  log.js:21 [HMR] App is up to date.
  然后也没有热更新啊

  展开

  

  
• 
  Dark_Night

  2019-10-10

  老师您好我发现 plugins 里面并没有加 webpack.HotModuleReplacementPlugin 这个插件
  修改文件也能自动更新这是什么情况呢
  lugins: [
      // new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
      contentBase: './dist',
      // hot: true
    }
  我都注释了 我修改文件后浏览器也会自动刷新

  展开

  

  
• 
  依然爱你

  2019-09-20

  这里开始看的时候没怎么在意，自己不用脚手架搭建自己的react项目时发现只能监听更新，而不能做到实时无刷新热替换，官网上说react需要使用react-hot-loader,并且css代码还需要style-loader,没试成功，不知道老师怎么做的

  

  
• 
  一路向北

  2019-09-16

  本节课用到的webpack-dev-server的contentBase是自己指定的，也就是打包后的文件目录。我用create-react-app脚手架创建的项目，开启服务后，并没有被打包输出，直接可以热更新，请问这个怎么配置呢？

  

  
• 
  小刚

  2019-09-05

  我正常运行npm run dev完成命令，为什么浏览器打开之后是个空白的页面？还有我改变内容之后不自动更新？谢谢。
  

  

  