网站建设资讯

NEWS

网站建设资讯

react项目之webpack-dev-serve有什么用

这篇文章主要介绍了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支持两种自动刷新方式:

  1. Iframe mode

  2. Inline mode

react项目之webpack-dev-serve有什么用

修改package.json,添加script脚本start: " start " : " webpack-dev-server --open "

react项目之webpack-dev-serve有什么用

此时,在命令行输入 npm start ,则浏览器自动打开页面。

修改页面内容并保存,页面实现实时刷新。

感谢你能够认真阅读完这篇文章,希望小编分享的“react项目之webpack-dev-serve有什么用”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


网页名称:react项目之webpack-dev-serve有什么用
本文URL:http://cdweb.net/article/gsjdpg.html