搭建本地开发服务器

搭建本地开发服务器

:::warning 注意

在上一个案例的基础上添加本地开发服务器,请保留上个案例的代码。如需要请查看 Webpack 使用

:::

搭建本地开发服务器这一个环节是非常有必要的,我们不可能每次修改源代码就重新打包一次。这样的操作是不是太繁琐了。所以本地开发服务器的作用就能体现了,它会自动监听我们的入口文件所关联的文件是否有变化,如果有则自动进行打包操作。

  1. 通过命令 yarn add webpack-dev-server 安装 webpack 本地开发服务器插件。
  1. 在之前 webpack.config.js 配置的基础上额外添加本地开发服务器配置。
javascript 复制代码
module.exports = {
    /**
     * 开发服务器
     */
    devServer: {
        port: 8000, // 启动的端口号
        open: true // 启动服务后自动打开浏览器
    }
}
  1. 新建 public 文件夹,这个名称是固定的。把 index.html 文件移动到该目录下,并且修改 bundle.js 路径。
  1. 通过命令 npx webpack-dev-server 运行本地开发服务器,运行后页面会自动打开。
  1. 尝试修改样式文件 styles/index.scss 将 $height 改为 50px。
  1. 保存样式文件后直接访问刚才打开的页面,可以看到已经实时更新了。

原文链接:菜园前端

相关推荐
IT_陈寒16 小时前
Java 17 新特性实战:这5个隐藏功能让你的代码效率提升50%
前端·人工智能·后端
艾小码17 小时前
2025年组件化开发这样做,效率提升300%
前端·javascript
驭风少年君1 天前
《搭建属于自己的网站之网页前端学习》基础入门
前端·学习
刘一说1 天前
深入理解 Spring Boot 嵌入式 Web 容器:从原理到性能调优
前端·spring boot·firefox
你的人类朋友1 天前
设计模式的原则有哪些?
前端·后端·设计模式
!执行1 天前
Web3 前端与合约交互
前端·web3·1024程序员节
潘小安1 天前
跟着 AI 学(二)- Quill 接入速通
前端
十里-1 天前
在 Vue2 中为 Element-UI 的 el-dialog 添加拖拽功能
前端·vue.js·ui
shada1 天前
从Google Chrome商店下载CRX文件
前端·chrome
左耳咚1 天前
项目开发中从补码到精度丢失的陷阱
前端·javascript·面试