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文件夹作为服务器根目录;


相关推荐
@大迁世界2 分钟前
02.CSS变量 (Variables)
前端·css
鹏多多5 分钟前
轻量+响应式!React瀑布流插件react-masonry-css的详细教程和案例
前端·javascript·react.js
用户345848285058 分钟前
java中的tomicInteger/AtomicLong介绍
前端·后端
一颗宁檬不酸10 分钟前
Vue.js 初学者基础知识点总结 第一弹
前端·javascript·vue.js
xiaoxue..12 分钟前
解析 LocalStorage与事件委托在前端数据持久化中的应用
前端·javascript·面试
Mintopia12 分钟前
「无界」全局浮窗组件设计与父子组件最佳实践
前端·前端框架·前端工程化
T0uken15 分钟前
Go + Node.js 全栈单文件部署方案
golang·node.js·状态模式
@cc小鱼仔仔25 分钟前
vue 知识点
前端·javascript·vue.js
特级业务专家28 分钟前
《终章:从 Vite 专用到全构建工具生态 - 我的字体插件如何征服 Webpack、Rollup 全栈》
前端·javascript·vue.js
一字白首28 分钟前
Node.js 入门搞定核心内置模块(fs/path/http/querystring)
学习·http·node.js