dva配合webpack4实现热更新

2020年01月23日Web前端

由于roadhog依旧使用webpack3(速度慢,打包文件大)且没人维护,所以就想折腾去掉roadhog,直接使用webpack4进行打包。不过在dev模式下,热更新遇到了些问题。

问题

配置了webpack-dev-server的热更新功能后,修改js,保存,刷新页面后,会报:

KnowExplore.js:81 Uncaught TypeError: Cannot read property 'xxxx' of undefined

实际上这个xxxx是存在redux中的数据。很显然,是由于model的问题,导致props中没有这个数据,才出现了报错。

处理方案

找了好久,要不是没有方案,要么就是不行。github上的issue也看了,没有解决方法,作者也不更新,不过好在最后摸索出了折中方案。

dva有个用于热更新的插件babel-plugin-dva-hmr,安装上,

npm install babel-plugin-dva-hmr redbox-react --save-dev

打开.babelrc文件,配置:

{
    // ...
    "plugins": [
        "dva-hmr",
        // ...
    ]
}

注:webpack-dev-server也需要配置热更新模式。

启动server后,有一个小问题,就是必须在server完全启动后,再在浏览器中打开或者清缓存重新刷新才能保证热更新。沿用先前的窗口或者简单刷新依旧会报错。