webpack 4 + Babel 7 + dva 使用hmr无效

[tylerrrkd]

.babelrc配置如下

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": "cjs",
        "useBuiltIns": "usage",
        "corejs": 3,
        "targets": {
          "ie": 11
        }
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    [
      "dva-hmr"
    ],
    [
      "add-module-exports",
      {
        "addDefaultProperty": true
      }
    ],
    //识别class组件
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
    [
      "@babel/plugin-transform-runtime",
      {
        // corejs: 3 also supports instance properties (e.g. [].includes)
        // https://babeljs.io/docs/en/next/babel-plugin-transform-runtime.html#corejs
        "corejs": {
          "version": 3,
          "proposals": true
        },
        // 保留ESModules，交给preset-env去处理modules
        "useESModules": true
      }
    ],
    //支持import 懒加载
    [
      "@babel/plugin-syntax-dynamic-import"
    ],
    //antd按需加载  true是less，如果不用less style的值可以写'css'
    [
      "import",
      {
        "libraryName": "antd",
        "libraryDirectory": "lib",
        "style": true
      },
      "ant"
    ],
  ]
}

webpack.config.js

  devServer: {
    hot: true,
    overlay: true,
    host: CONFIG.host,
    stats: "errors-only",
    disableHostCheck: true,
    historyApiFallback: true,
    port: CONFIG.port || 8000,
    contentBase: CONFIG.output,
  },

版本信息

"dva": "^1.1.0",
"@babel/core": "^7.5.5",
"babel-loader": "^8.0.6",
"babel-plugin-dva-hmr": "^0.4.2",
"webpack": "^4.39.3",

附

• 项目为旧项目升级，dva版本不敢随意乱动

安装的依赖同npm插件页介绍一样

npm install babel-plugin-dva-hmr [email protected] --save-dev

---

@sorrycc 大佬有时间帮忙看看，谢谢您！

[caihaihong]

请问解决了吗？

[tylerrrkd]

请问解决了吗？

没有噢 @caihaihong cai

[runningdemo]

@tylerrrkd @caihaihong

I found a solution for Webpack 5 and Babel 7, here is the detail:

1. First, set the hotOnly to true in the Webpack dev server.

// webpack.config.js
  devServer: {
    hotOnly: true,
  },

2. Second, change the way of importing the router. Do not use require but use import instead:

import router from './router';
app.router(router)

Hope it helps.