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

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

相关推荐
这是个栗子几秒前
【Vue代码分析】 import.meta.env.DEV:现代前端工程中的环境变量
前端·javascript·vue.js·环境变量
像牛奶却不是牛奶5 分钟前
记录几个前端实用小函数
前端·javascript
IDIOT___IDIOT9 分钟前
Windows 解锁后 Chrome 弹出白屏的排查与修复
前端·chrome
tuddy78946421 分钟前
前端应用的离线暂停更新策略:原理、实现与最佳实践
前端
hunterandroid32 分钟前
多线程与线程池:从 Thread 到高效并发
前端
用户69371750013841 小时前
AI Agent 里的 Loop 到底是什么?
android·前端·后端
甜美的小天鹅1 小时前
TDD in HTML & JavaScript 概述
javascript·html·tdd
hunterandroid1 小时前
内存泄漏与 LeakCanary:从问题定位到修复思路
前端
用户94688315057501 小时前
四、elpis 基于 vue3 完成动态组件库建设
前端
用户298698530142 小时前
如何在 JavaScript 和 React 中下载/导出 Excel 文件
前端·javascript·react.js