首页 > Web开发 > 详细

webpack-dev-server搭建本地服务器

时间:2021-09-24 13:24:42      阅读:43      评论:0      收藏:0      [点我收藏+]

一.webpack-dev-server

当文件发生变化时,可以自动的完成 编译 和 展示;而不需要去打包运行;

安装webpack-dev-server

npm install webpack-dev-server -D

技术分享图片

webpack-dev-server 在编译之后不会写入到任何输出文件。而是将 bundle 文件保留在内存中:
  • 事实上webpack-dev-server使用了一个库叫memfs(memory-fs webpack)自己写的

  • 但是有一个坏处:

  • 因为每次修改代码,都会导致自动刷新浏览器; 这样之前保存的变量, vuex的值都会被清除;

  • 解决办法:

模块热替换(HMR)

二.模块热替换(HMR)

HMR是什么?

  • HMR的全称是 Hot Module Replacement, 翻译为: 模块热替换

  • 模块热替换是指在 应用程序运行过程中, 替换, 添加, 删除模块, 而无需重新刷新整个页面;

HMR通过如下几种方式,来提高开发的速度:

  • 不重新加载整个页面,这样可以保留某些应用程序的状态不丢失;

  • 只更新需要变化的内容,节省开发的时间;

  • 修改了css、js源代码,会立即在浏览器更新,相当于直接在浏览器的devtools中直接修改样式;

webpack-dev-server搭建本地服务器

原文:https://www.cnblogs.com/cl1998/p/15306663.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!