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

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

相关推荐
终端鹿9 分钟前
Suspense 异步组件与懒加载实战
前端·vue.js
清风细雨_林木木12 分钟前
CSS 报错:css-semicolonexpected 解决方案
前端·css
Jinuss15 分钟前
源码分析之React中useRef解析
前端·javascript·react.js
cch891816 分钟前
css 样式说明,在页面布局开发中,样式表用于控制组件的尺寸、间距、边框及背景等视觉表现
前端·javascript·html
被AI抢饭碗的人29 分钟前
QT:基础与信号槽
前端·qt
熙街丶一人35 分钟前
css 图片未加载时默认高度,加载后随图片高度
前端·javascript·css
xiaoliuliu1234536 分钟前
Android Studio 2025 安装教程:详细步骤+自定义安装路径+SDK配置(附桌面快捷方式创建)
java·前端·数据库
紫_龙37 分钟前
最新版vue3+TypeScript开发入门到实战教程之Pinia详解
前端·javascript·typescript
533_38 分钟前
[echarts] 使用scss变量
前端·echarts·scss
小李云雾1 小时前
零基础-从ESS6基础到前后端联通实战
前端·python·okhttp·中间件·eclipse·html·fastapi