webpack5零基础入门-12搭建开发服务器

1.目的

每次写完代码都需要手动输入指令才能编译代码,太麻烦了,我们希望一切自动化

2.安装相关包

复制代码
npm install --save-dev webpack-dev-server

3.添加配置

在webpack.config.js中添加devServer相关配置

复制代码
  /**开发服务器 */
    devServer: {
        host: 'localhost',//启动服务器域名
        port: "3000",//启动服务器端口号
        open: true,//是否自动打开浏览器
    }

4.启动服务

执行npx webpack serve

此时修改文件后,webpack会自动重新打包

注意:开发服务器不会输出资源,在内存中进行编译打包的。

相关推荐
明月_清风1 分钟前
爆破前端生态!Cloudflare 收购 Vite 背后,前端开发者会迎来什么变化?
前端·vite
光影少年2 分钟前
react的useMemo 如何优化?
前端·react.js·掘金·金石计划
星栈2 分钟前
Makepad、egui、Dioxus、Tauri:Rust GUI 到底怎么选
前端·rust
ai_coder_ai2 分钟前
如何在自动化脚本中实现定时操作?
java·前端·javascript
努力早日退休3 分钟前
一个 9999px 引发的跨平台血案:小程序离屏隐藏元素的滚动兼容性问题
前端·javascript
嘟嘟071718 分钟前
前端异步编程完全指南:从json-server到DeepSeek大模型接口调用
前端
用户0595401744618 分钟前
大模型多轮对话“失忆”踩坑实录:一次线上事故让我排查了48小时,最终靠 Playwright + Pytest 把记忆锁死
前端·css
橘子星18 分钟前
前端薅数据神器 Fetch:不用翻墙,在线拿捏后端与 AI 接口
前端·后端
步步为营DotNet20 分钟前
探索.NET 11:Blazor 在跨平台客户端应用开发的进阶实践
前端·asp.net·.net
Hello馒头儿22 分钟前
vue3+uniapp经典hook方式实现一个更多加载的列表组件
前端·javascript·vue.js