使用react-hot-loader的一些问题

1.与"mini-css-extract-plugin"插件不兼容

这个官方文档也有提到过，在开发环境中，当使用react-hot-loader时，最好还是不要把css文件提取出来，仍然和js放在一起。

具体方法是在不同的环境配置不同的loader

{
  test: /\.css$/, 
  use: [
    env === "development" ? 'style-loader' : MiniCssExtractPlugin.loader,
    'css-loader'
  ]
},
{
  test: /\.less$/,
  use: [
    env === "development" ? 'style-loader' : MiniCssExtractPlugin.loader,
    'css-loader',
    'less-loader'
  ]
}

　　

2.与react-loadable不兼容

当使用react-loadable 按照路由拆分代码的时候，在dev环境热更新不生效。它与react-hot-loader不可以完全兼容，这个问题一直存在，在react-hot-loaderr的 issue 中也有提到过这个问题。

开发这个的一个俄罗斯开发者有提出 react-hot-component-loader 这个工具去hack这些。尝试了很多方法，各种奇怪问题，最后弃用了AppContainer，用hot(module) 强制更新

import React, { Component } from 'react'
import { hot } from 'react-hot-loader'
import { Route, Switch } from 'react-router-dom'
import routes from './router'

class App extends Component {
  render() {
    const routeWithSubRoutes = (route, index) =>
      <Route
        key={index}
        exact={route.exact || false}
        path={route.path}
        render={props => <route.component {...props} routes={route.routes} />}
      />
    return (
      <Switch>
        {routes.map((route, index) => routeWithSubRoutes(route, index))}
      </Switch>
    )
  }
}

export default hot(module)(App)

　　

另外我自己用webpack4+react16 搭了一个简单的CSR 渲染脚手架

地址：https://github.com/lyxverycool/react-csr-templete