1. 安裝 react-hot-loader
npm install --save-dev react-hot-loader
2. webpack配置
const app = ['babel-polyfill', './index'] //單入口
app.unshift('react-hot-loader/patch', 'webpack-dev-server/client?http://' + DEV_SERVER_HOST + ':' + PORT, 'webpack/hot/only-dev-server')
devServer: {
inline:true,
open: false,
host: DEV_SERVER_HOST,
contentBase: Paths.DIST,
publicPath: Paths.PublicPath.DEV,
port: PORT,
hot: true
}
3. babelrc
注意：配置到默認(rèn)開發(fā)環(huán)境下泳猬，否則生成環(huán)境會(huì)產(chǎn)生無(wú)用代碼
//babel配置文件响巢，不需要做修改，因?yàn)槎寂渲煤昧?{
"presets": [
["es2015"],
"react",
"stage-0"
],
"plugins": [
// "react-hot-loader/babel",
["transform-runtime", {
"helpers": false,
"polyfill": true,
"regenerator": true,
"moduleName": "babel-runtime"
}],
"transform-decorators-legacy",
"transform-async-to-generator",
"transform-do-expressions",
"syntax-do-expressions",
"syntax-dynamic-import",
["import", { "libraryName": "antd-mobile", "style": "css" }] // `style: true` 會(huì)加載 less 文件
],
"env": {
"development": {
"plugins": [ "react-hot-loader/babel" ]
}
}
}
4. 入口js修改
const render = Component =>
ReactDOM.render(
<AppContainer>
<Provider store={store}>
<Component />
</Provider>
</AppContainer>,
document.getElementById('root')
);
render(App);
if (module.hot) {
module.hot.accept()
}
