分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

webpack 中 css 和 html 刷新问题的解决思路

发布时间:2023-09-06 01:43责任编辑:赖小花关键词:webpack

webpack-dev-server有热更新功能,当webpack入口的js文件被修改,则会自动更新数据并刷新浏览器。

css 问题

如果使用style-loader将样式添加到js文件中,在编写样式的时候可以享受热更新的效果,如果使用extract-text-webpack-plugin 将样式提取,此组件并不支持热更新。只会重新打包但是并不会刷新页面。

官方建议在开发环境中关闭ExtractText组件。

html 问题

html-webpack-plugin 创建html 并不经过entry的入口,并没有在热更新的检测范围,所以并没有热更新

总结:css 和 html 没有热更新的原因是没有进入到entry 入口,不在热跟新的检测范围内。

解决方案1:

使用express、webpack-dev-middleware和webpack-hot-middeware手动搭建一个高定制化的node 服务器。帮html和样式文件也纳入到热更新的检测范围。

此方法成本比较高。如果不熟练,容易衍生更多问题-_-||

解决方案2:

css:开发环境中使用style-loader。
html:在入口文件利用raw-loader 加载一下你的index.html 文件。(个人并没有验证此方法。)
总的来说是让html和css文件进入到webpack的热更新的检测范围。

解决方案3:

使用LiveReload浏览器插件。

需要两个部分:

  • 在系统安装 liveReload 客户端服务器 作用:检测指定文件变化
  • 在浏览器安装 liveReload 插件 执行更新行为。

此方案简单粗暴,不用修改配置文件,不会衍生其他问题。

webpack 中 css 和 html 刷新问题的解决思路

原文地址:https://www.cnblogs.com/liang1100/p/8457701.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved