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

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

    具体解决方案:

    热加载(HMR)是 Webpack Dev Server 最强大的功能之一,页面源码的变更可以无需刷新地实时推送到页面上。以 vue 为例,一个最简的 HMR 配置策略如下所示:

    首先安装 webpack-dev-server 与前端 JS 库的 HMR 依赖(如 Vue 的 vue-hot-reload-api),而后编辑 package.json中的命令:

    {
      "scripts": {
        "dev-server": "webpack-dev-server --hot --inline"
      }
    }
    

    添加这一行代码后,运行 npm run dev-server 即可实现带 HMR 功能的 dev-server 引入。这也就相当于在完全没有修改业务代码的前提下,完成了 HMR 的引入(实际上这也确实是一个 opt-in 的特性)。而若需对 Webpack Dev Server 进行配置,可以编辑 webpack.config.js 中 module. devServer 的相关字段。

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

    通过 NPM Scripts,可以很容易地区分带 HMR 和不带 HMR 的构建命令。例如如下的配置:

    {
      "scripts": {
        "dev": "webpack --watch",
        "dev-server": "webpack-dev-server --hot --inline"
      }
    }
    

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

  • 相关阅读:
    最近的题越来越难了,卧槽,搞一上午一题不会,题解也看不懂
    hdu 4630 树状数组 ****
    hdu 3473 划分树 ***
    hdu 3360 最小点覆盖 **
    hdu 1507 记录路径的二分匹配 **
    poj 3177 边双联通 **
    hdu 4612 边双联通 ***
    Elasticsearch聚合后分页深入详解
    redis 五种数据类型及其使用场景
    再有人问你分布式锁,这篇文章扔给他
  • 原文地址:https://www.cnblogs.com/twodog/p/12134690.html
Copyright © 2011-2022 走看看