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会自动重新打包

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

相关推荐
暗冰ཏོ几秒前
ECharts 前端图表开发全攻略:参数配置、项目实战与高级可视化资源整理
前端·vue.js·echarts·visual studio code
PILIPALAPENG3 分钟前
gh:终端里的GitHub总控台,AI时代的开发者神器
前端·人工智能·后端
用户059540174469 分钟前
Redis持久化踩坑实录:RDB+AOF混合持久化,竟会悄无声息丢数据?我用pytest+Docker复现了30次故障场景
前端·css
浮游本尊11 分钟前
项目全景 + 第一条完整后端链路
java·前端
小新11016 分钟前
vue架的网站修改端口
前端·javascript·vue.js
暗不需求18 分钟前
从零实现一个 Vue Todos 任务清单:深入响应式编程与组合式 API
前端·vue.js·面试
超绝大帅哥19 分钟前
TTFB, FP, FCP, LCP, CLS, INP,TBT, TTI性能指标
前端
用户17335980753722 分钟前
纯前端 PDF 处理避坑指南:5 个线上真实问题的解决方案
前端·javascript
Csvn24 分钟前
前端项目管理:需求拆解、排期与风险控制
前端
陈_杨27 分钟前
鸿蒙APP开发-带你走近分构App的分子数据
前端·javascript