09 —— Webpack搭建开发环境

搭建开发环境 ------ 使用webpack-dev-server

启动Web服务,自动检测代码变化,有变化后会自动重新打包,热更新到网页(代码变化后,直接替换变化的代码,自动更新网页,不用手动刷新网页)

如何搭建开发环境

  • 下载webpack-dev-server软件包到当前项目
  • 设置模式为开发模式
  • 配置自定义命令

启动后自动弹出浏览器 --open

  • npm run dev启动开发服务器

版本兼容性问题

"webpack": "^5.74.0",

"webpack-cli": "^4.10.0",

"webpack-dev-server": "^4.7.0"

webpack-dev-server借助http模块创建8080默认Web服务 ;

默认以public文件夹作为服务器根目录;


相关推荐
亦世凡华、10 分钟前
Rollup入门与进阶:为现代Web应用构建超小的打包文件
前端·经验分享·rollup·配置项目·前端分享
Bl_a_ck36 分钟前
【React】Craco 简介
开发语言·前端·react.js·typescript·前端框架
augenstern4162 小时前
webpack重构优化
前端·webpack·重构
海拥✘2 小时前
CodeBuddy终极测评:中国版Cursor的开发革命(含安装指南+HTML游戏实战)
前端·游戏·html
寧笙(Lycode)2 小时前
React系列——HOC高阶组件的封装与使用
前端·react.js·前端框架
asqq82 小时前
CSS 中的 ::before 和 ::after 伪元素
前端·css
拖孩3 小时前
【Nova UI】十五、打造组件库之滚动条组件(上):滚动条组件的起步与进阶
前端·javascript·css·vue.js·ui组件库
Hejjon3 小时前
Vue2 elementUI 二次封装命令式表单弹框组件
前端·vue.js
小堃学编程4 小时前
前端学习(3)—— CSS实现热搜榜
前端·学习
Wannaer4 小时前
从 Vue3 回望 Vue2:响应式的内核革命
前端·javascript·vue.js