Webpack监视文件修改,自动重新打包文件

方法一:使用watch监视文件变化

在终端中输入以下指令:

npx webpack --watch

我们使用这种方法监听文件变化时只会监听我们计算机本地的文件变化,在开发场景中我们的项目是要部署到服务器中的,因此这种方式并不推荐。

方法二:开启Webpack开发服务器(推荐)

(一)安装Webpack开发服务器依赖

在终端中输入以下指令:

npm i -D webpack-dev-server

(二)运行Webpack开发服务器

在终端中输入以下指令:

npx webpack serve

输入指令后按住Ctrl点击http://localhost:8080/链接

或者是在终端输入以下指令:

npx webpack serve --open

运行Webpack开发服务器的同时能够自动打开浏览器

相关推荐
付十一1 天前
更新!Figma MCP + Cursor:大前端时代的UI到代码自动化
android·前端·ai编程
万岳科技程序员小金1 天前
多端统一的教育系统源码开发详解:Web、小程序与APP的无缝融合
前端·小程序·软件开发·app开发·在线教育系统源码·教育培训app开发·教育培训小程序
软件架构师-叶秋1 天前
Vue3+tyepescript+ElementPlus+Axios前端技术栈
前端·vue3·elementplus
濮水大叔1 天前
VonaJS: 直观好用的分布式锁
typescript·node.js·nestjs
AAA阿giao1 天前
HTML/CSS/JS 页面渲染机制:揭秘浏览器如何将平凡代码点化为视觉魔法
前端·css·html
lichenyang4531 天前
从零到一:编写一个简单的 Umi 插件并发布到 npm
前端·react.js·前端框架
一颗宁檬不酸1 天前
ajxa实例操作
前端·ajax·api
文心快码BaiduComate1 天前
CCF程序员大会码力全开:AI加速营,10w奖金等你拿!
前端·后端·程序员
前端西瓜哥1 天前
Figma 协同编辑是如何做用户状态同步的?
前端
OpenTiny社区1 天前
不止按钮和表格!TinyVue 偷偷上线 Space 组件,直接搞定「弹性+间距」布局
前端·vue.js·github