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 ，则浏览器自动打开页面。
修改页面内容并保存，页面实现实时刷新。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
React整个的渲染机制就是React会调用render()函数构建一棵Dom树，在state/props发生改变的时候，render()函数会被再次调用渲染出另外一棵树，重新渲染所有的节点，构造出新的虚拟Dom tree2022-11-11
React Native中WebView与html双向通信遇到的坑
这篇文章主要介绍了React Native中WebView与html双向通信的一些问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-01-01
这篇文章主要介绍了React 添加引用路径时如何使用@符号作为src文件,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
这篇文章主要介绍了React中引入less、less-loader问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要为大家介绍了React useState的错误用法避坑详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
React+TypeScript+webpack4多入口配置详解
这篇文章主要介绍了React+TypeScript+webpack4多入口配置详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
在现代前端开发中,性能优化是一个不可忽视的重要环节,在 React 生态系统中,React Profiler 是一个强大的工具,下面我们来看看如何使用它来提升我们的 React 应用吧2025-03-03
这篇文章主要介绍了React中的for循环解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
React Native可定制底板组件Magic Sheet使用示例
这篇文章主要为大家介绍了React Native可定制的底板组件Magic Sheet使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
本篇文章主要介绍了Parcel 打包示例(React HelloWorld)，详细的介绍了Parcel打包的特点和使用示例，有兴趣的可以了解一下2018-01-01
最新评论