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

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

相关推荐
悟空瞎说1 分钟前
Electron 踩坑实录:主窗口 icon 配置了,打包 Windows 后死活不显示?(全网最细排查+解决方案)
前端
Lee川22 分钟前
Vue Router 4 核心精讲:从原理到面试实战
前端·vue.js
树上有只程序猿25 分钟前
2026年,学“前端”还有前途吗?
前端
我命由我1234530 分钟前
JS 开发问题:url.includes is not a function
开发语言·前端·javascript·html·ecmascript·html5·js
weixin1997010801635 分钟前
义乌购商品详情页前端性能优化实战
前端·性能优化
汪啊汪37 分钟前
Day 3:Hooks 原理
前端
汪啊汪40 分钟前
Day 2:JSX 转换原理
前端
学以智用41 分钟前
Vue3 + Vue Router 4 完整示例(可直接运行)
前端·vue.js
程序员小李白43 分钟前
vue2基本语法详细解析(2.7条件渲染)
开发语言·前端·javascript
SuperEugene43 分钟前
Vue3 项目目录结构规范:按业务域划分,新人快速上手|项目规范篇
前端·javascript·vue.js