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

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

相关推荐
李牧九丶10 分钟前
从零学算法1334
前端·算法
周周爱喝粥呀16 分钟前
UI设计原则和Nielsen 的 10 条可用性原则
前端·ui
小云朵爱编程1 小时前
Vue项目Iconify的使用以及自定义图标,封装图标选择器
前端·javascript·vue.js
前端大卫1 小时前
CSS 属性值 initial、unset 和 revert 的解析
前端
蜉蝣之翼❉1 小时前
opencv c++ 修改加载图像大小限制
c++·opencv·webpack
shimh_凉茶1 小时前
webpack+vue2打包分析视图插件 webpack-bundle-analyzer
前端·webpack·node.js
P***25391 小时前
JavaScript部署
开发语言·前端·javascript
一只小阿乐1 小时前
react 状态管理mobx中的行为模式
前端·javascript·react.js·mobx·vue开发·react开发
l***O5201 小时前
前端路由历史监听,React与Vue实现
前端·vue.js·react.js
超级战斗鸡1 小时前
React 性能优化教程:useMemo 和 useCallback 的正确使用方式
前端·react.js·性能优化