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