課程
/前端開發(fā)
/React.JS
/使用React構建一款音樂播放器
2-2節(jié),突然一下子就熱更新了,怎么配置熱更新都沒講,表示新手一臉懵逼
2017-12-06
源自:使用React構建一款音樂播放器 2-2
正在回答
webpack.config.js里entry是devServer的相關使用方法,webpack-dev-server(1)可以監(jiān)聽本地文件變化自動編譯文件(2)本地服務器
模塊熱替換(你看到的頁面內(nèi)容自己更新,但是沒有刷頁面的操作)是用react-hot-loader(作者已經(jīng)不維護,目前推薦react Transform),第一個配置也是在entry里,然后在plugin(插件)里使用new webpack.HotModuleReplacementPlugin(),最后在index.js使用
import { AppContainer } from 'react-hot-loader'
<AppContainer>
<Hello />
</AppContainer>
// 配置
if (module.hot) {
module.hot.accept('./components/hello', () => {
? ?const NewHello = require('./components/hello').default
render(
<NewHello />
</AppContainer>,
document.getElementById('root')
)
})
}
使用熱替換的好處就是頁面狀態(tài)不會丟
舉報
從零開始使用React構建一款音樂播放器
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學習伙伴
掃描二維碼關注慕課網(wǎng)微信公眾號
2017-12-08
webpack.config.js里entry是devServer的相關使用方法,webpack-dev-server(1)可以監(jiān)聽本地文件變化自動編譯文件(2)本地服務器
模塊熱替換(你看到的頁面內(nèi)容自己更新,但是沒有刷頁面的操作)是用react-hot-loader(作者已經(jīng)不維護,目前推薦react Transform),第一個配置也是在entry里,然后在plugin(插件)里使用new webpack.HotModuleReplacementPlugin(),最后在index.js使用
import { AppContainer } from 'react-hot-loader'
<AppContainer>
<Hello />
</AppContainer>
// 配置
if (module.hot) {
module.hot.accept('./components/hello', () => {
? ?const NewHello = require('./components/hello').default
render(
<AppContainer>
<NewHello />
</AppContainer>,
document.getElementById('root')
)
})
}
使用熱替換的好處就是頁面狀態(tài)不會丟