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

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

相关推荐
Lupino19 小时前
被 React “玩弄”的 24 小时:为了修一个不存在的 Bug,我给大模型送了顿火锅钱
前端·react.js
米丘19 小时前
了解 Javascript 模块化,更好地掌握 Vite 、Webpack、Rollup 等打包工具
前端
Heo19 小时前
深入 React19 Diff 算法
前端·javascript·面试
滕青山19 小时前
个人所得税计算器 在线工具核心JS实现
前端·javascript·vue.js
小怪点点19 小时前
手写promise
前端·promise
国思RDIF框架19 小时前
RDIFramework.NET Web 敏捷开发框架 V6.3 发布 (.NET8+、Framework 双引擎)
前端
Mintopia19 小时前
如何在有限的时间里,活出几倍的人生
前端
炫饭第一名19 小时前
速通Canvas指北🦮——变形、渐变与阴影篇
前端·javascript·程序员
Neptune119 小时前
让我带你迅速吃透React组件通信:从入门到精通(上篇)
前端·javascript
阿懂在掘金19 小时前
Vue 表单避坑(一):为什么 v-model 绑定对象属性会偷偷修改父组件数据?
前端·vue.js