react项目实践之webpack-dev-serve
模块热替换(Hot Module Replacement)
HMR是webpack最令人兴奋的特性之一，当你对代码进行修改并保存后，webpack 将对代码重新打包，并将新的模块发送到浏览器端，浏览器通过新的模块替换老的模块，这样在不刷新浏览器的前提下就能够对应用进行更新。HMR是一个非常值得去深入研究的东西，它绝不是目前我们看到的大多数技术文章说的配置一个hot参数这么简单，有兴趣的小伙伴可以去看看它的实现原理，目前为止我也只看过一点点。
其实实现HMR的插件有很多，webpack-dev-server只是其中的一个，当然也是优秀的一个，它能很好的与webpack配合。另外，webpack-dev-server只是用于开发环境的。
webpack-dev-server是一个小型的静态文件服务器，为webpack打包的资源文件提供Web服务。并且提供自动刷新和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 ，则浏览器自动打开页面。
修改页面内容并保存，页面实现实时刷新。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Redux是为javascript应用程序提供一个状态管理工具集中的管理react中多个组件的状态redux是专门作状态管理的js库（不是react插件库可以用在其他js框架中例如vue，但是基本用在react中），这篇文章主要介绍了react-redux及redux状态管理工具使用详解,需要的朋友可以参考下2023-01-01
这篇文章主要为大家介绍了React前端DOM常见Hook封装示例上篇，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
本文以简洁为目标，帮助快速上手react-router-dom默认你接触过路由相关的开发，通过实例代码讲解的很详细，对React路由相关知识感兴趣的朋友一起看看吧2021-05-05
React 正确使用useCallback useMemo的方式
这篇文章主要介绍了React 正确使用useCallback useMemo的方式，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下2022-08-08
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
这篇文章主要介绍了如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
由于react官方并没有提供缓存组件相关的api（类似vue中的keepalive），在某些场景，会使得页面交互性变的很差。所以本文为大家介绍了React中实现keepalive组件缓存效果的方法，希望对大家有所帮助2023-01-01
本文主要介绍了React样式冲突解决问题的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-03-03
这篇文章主要介绍了详解React路由传参方法汇总记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
这篇文章主要介绍了React Js 微信禁止复制链接，分享，禁止隐藏右上角菜单的解决代码,需要的朋友可以参考下2017-05-05
本篇文章主要介绍了react实现菜单权限控制的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
最新评论