脚本宝典收集整理的这篇文章主要介绍了create-react-app 热更新 配置,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
首先安装 npm i react-hot-loader -D
安装好之后在webpack.config.dev.js中entry第一行增加`'react-hot-loader/patch',客户端热更新代码需要用到的内容
如果有.babelrc文件就增加 "plugins": ["react-hot-loader/babel"]
{
"PResets": [
["es2015", {"loose": true}],
"react"
],
"plugins": ["react-hot-loader/babel"]
}
如果是create-react-app项目就在webpack.config.dev.js文件module-rules-oneof下新增代码"plugins": ["react-hot-loader/babel"]
大约在143行号
// Process JS wITh Babel.
{
test: /.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
plugins: [
'react-hot-loader/babel'
]
},
},
然后在代码的入口entry 根节点包含热更新
# File: index.js
import React From 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { AppContainer } from 'react-hot-loader'; // 包裹根节点,想要渲染的内容
const root = document.getElementById('root')
const render = component => {
ReactDOM.hydrate(
<AppContainer>
<Component />
</AppContainer>,
root
)
}
render(App)
if (module.hot) {
module.hot.accept('./App', () => { // 当我们热更新的代码出现的时候,把App重新加载
const NextApp = require('./App').default //因为在App里使用的是export default语法,这里使用的是require,默认不会加载default的,所以需要手动加上
render(NextApp) // 重新渲染到 document 里面
})
}
// ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
以上是脚本宝典为你收集整理的create-react-app 热更新 配置全部内容,希望文章能够帮你解决create-react-app 热更新 配置所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。