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开发服务器的同时能够自动打开浏览器

相关推荐
灵感__idea7 小时前
Hello 算法:让前端人真正理解算法
前端·javascript·算法
向葭奔赴♡7 小时前
CSS是什么?—— 网页的“化妆师”
前端·css
黑犬mo7 小时前
在Edge、Chrome浏览器上安装uBlock Origin插件
前端·edge
excel7 小时前
🧩 Vue 3 watch 源码详解(含完整注释)
前端·javascript·vue.js
大前端helloworld7 小时前
前端梳理体系从常问问题去完善-网络篇
前端·面试
excel8 小时前
🌿 一文看懂 Vue 3 的 watch 源码:从原理到流程
前端
繁依Fanyi8 小时前
让工具说话:我在 Inspira Board 里用 AI 把“能用、好用、可复用”落成了日常
前端
weixin_456904279 小时前
C# 中的回调函数
java·前端·c#
kura_tsuki9 小时前
[Web网页] LAMP 架构与环境搭建
前端·架构
yinuo10 小时前
UniApp+Vue3多分包引入同一 npm 库被重复打包至 vendor 的问题分析与解决
前端