zoukankan      html  css  js  c++  java
  • 控制台报错[WDS] Disconnected!

    webpack的HMR功能,是通过websocket实现的推送JSON Patch,同时需要第三方支持的库。

    具体的解决方案:

         热加载(HMR)是webpack dev server最强大的功能之一,页面源码更改无需刷新就能实时推送到页面。以vue为例,最简单的HMR配置策略如下:

         首先是下载webpack-dev-server与前端的js库的HMR依赖:  npm i webpack-dev-server

             之后编辑package.json中的命令,在script中配置dev-server:

           添加了这一行代码后,运行 npm run dev-server即可实现HMR功能的dev-server引入。这也相当于在没有修改业务代码的情况下,完成了HMR的引入。但是如果需对webpack-dev-server进行配置,可以编辑webpack.config.js中的module. devServer的相关字段。

           虽然HMR非常使用,但与webpack-dev-server的集成也一定程度上影响了其泛用性。在一些场景下,我们仍然需要在开发时使用webpack写入到磁盘的bundle文件,这时候就无法使用的dev-server配套的HMR。这就给我们引出一个问题,如何在配置中实现既支持HMR,又支持--watch的传统开发模式呢?

           通过npm scripts,可以很容易的区分带HMR和不带HMR的构建命令,如下所示:

        

          会区分两条构建开发包的命令,区别在于通过wepack的命令会将打包文件动态写入磁盘,而webpack-dev-server的命令可以在使用webpack配置文件的基础上,无缝引入HMR特性。这样,可以在开发环境不适合使用HMR的场合中也可以通过npm run dev命令实现回退。

                    

  • 相关阅读:
    国家语言,语言代码,locale id对应表
    SpringMVC,SpringBoot文件下载
    lombok使用基础教程
    博客园主题修改中用到的css属性
    Hexo next博客添加折叠块功能添加折叠代码块
    IntelIj IDEA运行JUnit Test OutOfMemoryError
    Spring Boot-JPA、Hibernate、Spring data jpa之间的关系
    IntelliJ IDEA-设置字体大小
    win10-mysql卸载干净
    IntelliJ IDEA Check out from git
  • 原文地址:https://www.cnblogs.com/lxz123/p/12197783.html
Copyright © 2011-2022 走看看