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)文章
React整個的渲染機制就是React會調(diào)用render()函數(shù)構(gòu)建一棵Dom樹，在state/props發(fā)生改變的時候，render()函數(shù)會被再次調(diào)用渲染出另外一棵樹，重新渲染所有的節(jié)點，構(gòu)造出新的虛擬Dom tree2022-11-11
React Native中WebView與html雙向通信遇到的坑
這篇文章主要介紹了React Native中WebView與html雙向通信的一些問題，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-01-01
這篇文章主要介紹了React 添加引用路徑時如何使用@符號作為src文件,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
這篇文章主要介紹了React中引入less、less-loader問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要為大家介紹了React useState的錯誤用法避坑詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
React+TypeScript+webpack4多入口配置詳解
這篇文章主要介紹了React+TypeScript+webpack4多入口配置詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
使用React Profiler進行性能優(yōu)化方案詳解
在現(xiàn)代前端開發(fā)中,性能優(yōu)化是一個不可忽視的重要環(huán)節(jié),在 React 生態(tài)系統(tǒng)中,React Profiler 是一個強大的工具,下面我們來看看如何使用它來提升我們的 React 應(yīng)用吧2025-03-03
這篇文章主要介紹了React中的for循環(huán)解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
React Native可定制底板組件Magic Sheet使用示例
這篇文章主要為大家介紹了React Native可定制的底板組件Magic Sheet使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
本篇文章主要介紹了Parcel 打包示例(React HelloWorld)，詳細的介紹了Parcel打包的特點和使用示例，有興趣的可以了解一下2018-01-01