react项目实践之webpack-dev-serve
2019-05-12 18:02
1781 查看
模块热替换(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 ,则浏览器自动打开页面。
修改页面内容并保存,页面实现实时刷新。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 关于webpack项目资源加载优化的几个实践(以react举例)
- 开始一个React项目(二) 彻底弄懂webpack-dev-server的热更新
- WebPack在React项目架构中的应用实践
- 一步一步使用webpack创建react项目
- 在基于 create-react-app 的React项目中进行代码分片、按需加载(code splitting)/ 免webpack配置
- webpack+react+antd项目编写过程中遇到的问题
- webpack项目实践
- vue项目中的webpack-dev-sever配置方法
- 开始一个React项目(一)一个最简单的webpack配置
- 使用webpack搭建一个react项目
- 使用webpack打包react项目中遇到的问题(一)
- [react001] 使用webpack自动构建react 项目
- 从头创建一个基于 React, webpack, babel 的模板项目
- react+webpack+wepack-dev-server的环境中ant design图标离线的方法
- webpack + react 前端工程化实践和暂不极致优化
- Vue项目碰到"‘webpack-dev-server’不是内部或外部命令,也不是可运行的程序或批处理文件"报错
- webpack配置热加载之react-hot-loader和webpack-dev-server的使用
- Vue + webpack 项目实践
- react,redux,webpack前端项目
- Vue + webpack 项目实践