react項(xiàng)目實(shí)踐之webpack-dev-serve
模塊熱替換(Hot Module Replacement)
HMR是webpack最令人興奮的特性之一，當(dāng)你對代碼進(jìn)行修改并保存后，webpack 將對代碼重新打包，并將新的模塊發(fā)送到瀏覽器端，瀏覽器通過新的模塊替換老的模塊，這樣在不刷新瀏覽器的前提下就能夠?qū)?yīng)用進(jìn)行更新。HMR是一個(gè)非常值得去深入研究的東西，它絕不是目前我們看到的大多數(shù)技術(shù)文章說的配置一個(gè)hot參數(shù)這么簡單，有興趣的小伙伴可以去看看它的實(shí)現(xiàn)原理，目前為止我也只看過一點(diǎn)點(diǎn)。
其實(shí)實(shí)現(xiàn)HMR的插件有很多，webpack-dev-server只是其中的一個(gè)，當(dāng)然也是優(yōu)秀的一個(gè)，它能很好的與webpack配合。另外，webpack-dev-server只是用于開發(fā)環(huán)境的。
webpack-dev-server是一個(gè)小型的靜態(tài)文件服務(wù)器，為webpack打包的資源文件提供Web服務(wù)。并且提供自動(dòng)刷新和Hot Module Replacement（模塊熱替換：前端代碼變動(dòng)后無需刷新整個(gè)頁面，只把變化的部分替換掉）。
（1）安裝
npm install webpack-dev-server --save-dev
（2）配置
修改webpack.config.js，添加devServer的配置
devServer: {
contentBase: './dist',
port: 3000, // 默認(rèn)8080
host:'localhost',
inline: true // 實(shí)時(shí)刷新
},
webpack-dev-server支持兩種自動(dòng)刷新方式：
- Iframe mode
- Inline mode
修改package.json,添加script腳本start： " start " : " webpack-dev-server --open "
此時(shí)，在命令行輸入 npm start ，則瀏覽器自動(dòng)打開頁面。
修改頁面內(nèi)容并保存，頁面實(shí)現(xiàn)實(shí)時(shí)刷新。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了JS跨域解決方案react配置反向代理的示例內(nèi)容詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步2021-11-11
本文主要介紹了react合成事件與原生事件的相關(guān)概念，幫助大家區(qū)分這兩種事件，學(xué)習(xí)react的同學(xué)不妨了解下2021-05-05
webpack手動(dòng)配置React開發(fā)環(huán)境的步驟
本篇文章主要介紹了webpack手動(dòng)配置React開發(fā)環(huán)境的步驟，webpack手動(dòng)配置一個(gè)獨(dú)立的React開發(fā)環(huán)境, 開發(fā)環(huán)境完成后, 支持自動(dòng)構(gòu)建, 自動(dòng)刷新, sass語法 等功能...感興趣的小伙伴們可以參考一下2018-07-07
react-native ListView下拉刷新上拉加載實(shí)現(xiàn)代碼
本篇文章主要介紹了react-native ListView下拉刷新上拉加載實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
React immer與Redux Toolkit使用教程詳解
這篇文章主要介紹了React中immer與Redux Toolkit的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10
這篇文章主要介紹了淺談箭頭函數(shù)寫法在ReactJs中的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
React+EggJs實(shí)現(xiàn)斷點(diǎn)續(xù)傳的示例代碼
這篇文章主要介紹了React+EggJs實(shí)現(xiàn)斷點(diǎn)續(xù)傳的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
基于React.js實(shí)現(xiàn)簡單的文字跑馬燈效果
剛好手上有一個(gè)要實(shí)現(xiàn)文字跑馬燈的react項(xiàng)目，然后ant-design上面沒有這個(gè)組件，于是只能自己手?jǐn)]一個(gè)，文中的實(shí)現(xiàn)方法講解詳細(xì)，希望對大家有所幫助2023-01-01
React通過父組件傳遞類名給子組件的實(shí)現(xiàn)方法
React 是一個(gè)用于構(gòu)建用戶界面的 JAVASCRIPT 庫。這篇文章主要介紹了React通過父組件傳遞類名給子組件的方法,需要的朋友可以參考下2017-11-11
教你應(yīng)用?SOLID?原則整理?React?代碼之單一原則
這篇文章主要介紹了如何應(yīng)用?SOLID?原則整理?React?代碼之單一原則,今天，我們將從一個(gè)糟糕的代碼示例開始，應(yīng)用 SOLID 的第一個(gè)原則，看看它如何幫助我們編寫小巧、漂亮、干凈的并明確責(zé)任的 React 組件，需要的朋友可以參考下2022-07-07