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

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

相关推荐
一直都在572几秒前
JSoup:Java 处理 HTML 的实用利器,从基础到实战爬取教程
java·python·html
亿元程序员2 分钟前
历时100天,亿元Cocos小游戏实战合集顺利完结!!!
前端
恋猫de小郭16 分钟前
Flutter Beta 版本引入 ScrollCacheExtent ,并修复长久存在的 shrinkWrap NaN 问题
android·前端·flutter
Liu.77417 分钟前
vscode前端实用插件
前端·vscode
HWL567927 分钟前
使用CSS实现,带有动态浮动高亮效果的导航菜单
前端·css
GISer_Jing28 分钟前
AI Agent技能Skills设计
前端·人工智能·aigc·状态模式
大漠_w3cpluscom31 分钟前
使用 sibling-index() 和 if() 实现动态的 :nth-child()
前端
小江的记录本1 小时前
【PageHelper】 【Spring Boot + MyBatis + PageHelper】 完整项目示例+PageHelper核心原理深度解析
java·前端·spring boot·后端·sql·spring·mybatis
JamesYoung79711 小时前
第九部分 — 打包、调试和发布 发布前的打包与发布检查清单(Chrome 应用商店)
前端·chrome
多加点辣也没关系1 小时前
Node.js 与 npm 的安装与配置(详细教程)
前端·npm·node.js