• 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
     16
  • 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-05
    > webpack-dev-server --open

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

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

    
     7
  • 有杀气呀
    2019-06-07
    同求上面同学的建议,webpack-dev-server和webpack-dev-middleware的详细区别,特别是使用场景,希望老师能再抽出来讲一讲
    
     6
  • Zkerhcy
    2019-06-04
    HMR什么情况下会失败?我这边自己写或者用GitHub上的示例代码,每次浏览器都会整体刷新。
     1
     4
  • Treasure
    2019-07-17
    个人觉得,老师在讲到原理部分的时候,是不是可以语速稍微放慢一点儿(给我的感觉像是在读ppt)?
    感觉原理部分还是比较晦涩的对于新手来说,希望在学完本教程以后不只是学会webpack如何配置。
    
     3
  • Zkerhcy
    2019-06-18
    老师您好!我回看了这一节,写了demo,发现修改search.js的内容浏览器还是整体会刷新,但是修改search.less的内容HMR生效、不会刷新浏览器。这是什么原因?
     2
     3
  • 范饭飯
    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
  • 霍进
    2020-01-29
    老师在留言的回复内容,真得很细心,能起到总结归纳的作用 666
    
    
  • 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脚手架创建的项目,开启服务后,并没有被打包输出,直接可以热更新,请问这个怎么配置呢?
    
    
我们在线,来聊聊吧