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