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

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

相关推荐
良木林几秒前
webpack:基本打包方法
前端·webpack·node.js
青衫码上行1 分钟前
【JavaWeb学习 | 第17篇】JSP内置对象
java·开发语言·前端·学习·jsp
qq_570398577 分钟前
流式接口数据解析
前端·javascript·vue.js
坐吃山猪9 分钟前
Electron入门示例
前端·javascript·electron
那些免费的砖14 分钟前
Isle-Editor (岛屿编辑器) - 免费开源 Web 富文本编辑器,也支持 Notion 块编辑、MarkDown 语法,官方支持 Vue3 开箱即用
前端·编辑器·notion
꒰ঌ小武໒꒱15 分钟前
Trae CN IDE 使用教程
前端·python·编辑器
灵魂学者15 分钟前
Vue3.x —— router 路由配置
服务器·前端·vue.js·路由
by__csdn18 分钟前
Ajax与Axios终极对比指南全方位对比解析
前端·javascript·ajax·okhttp·typescript·vue·restful
khatung19 分钟前
借助Electron打通平台与用户通知(macOS系统)
前端·javascript·vscode·react.js·macos·electron·前端框架
by__csdn25 分钟前
Vue3+Axios终极封装指南
前端·javascript·vue.js·http·ajax·typescript·vue