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

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

相关推荐
Erishen11 分钟前
🚀 重新定义前端组件安装体验:shadcn + Bun 的极致开发效率
前端
冬奇Lab11 分钟前
Vercel部署全攻略:从GitHub到上线,10分钟让你的前端项目免费拥有自己的域名
前端·后端·node.js
牛马11113 分钟前
Flutter Web性能优化标签解析
前端·flutter·性能优化
Bigger14 分钟前
Tauri (25)——消除搜索列表默认选中的 UI 闪动
前端·react.js·weui
松涛和鸣18 分钟前
45、无依赖信息查询系统(C语言+SQLite3+HTML)
c语言·开发语言·数据库·单片机·sqlite·html
李少兄25 分钟前
简单讲讲 SVG:前端开发中的矢量图形
前端·svg
前端小万26 分钟前
告别 CJS 库加载兼容坑
前端·前端工程化
恋猫de小郭26 分钟前
Flutter 3.38.1 之后,因为某些框架低级错误导致提交 Store 被拒
android·前端·flutter
JarvanMo30 分钟前
Flutter 需要 Hooks 吗?
前端
光影少年41 分钟前
前端如何虚拟列表优化?
前端·react native·react.js