搭建本地开发服务器

搭建本地开发服务器

:::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. 保存样式文件后直接访问刚才打开的页面,可以看到已经实时更新了。

原文链接:菜园前端

相关推荐
Hierifer16 分钟前
跨端技术:浅聊双线程原理和实现
前端
FreeBuf_27 分钟前
加密货币武器化:恶意npm包利用以太坊智能合约实现隐蔽通信
前端·npm·智能合约
java水泥工1 小时前
基于Echarts+HTML5可视化数据大屏展示-图书馆大屏看板
前端·echarts·html5
EndingCoder1 小时前
Electron 性能优化:内存管理和渲染效率
javascript·性能优化·electron·前端框架
半夏陌离1 小时前
SQL 实战指南:电商订单数据分析(订单 / 用户 / 商品表关联 + 统计需求)
java·大数据·前端
子兮曰1 小时前
🚀Vue3异步组件:90%开发者不知道的性能陷阱与2025最佳实践
前端·vue.js·vite
牛十二1 小时前
mac-intel操作系统go-stock项目(股票分析工具)安装与配置指南
开发语言·前端·javascript
whysqwhw1 小时前
Kuikly 扩展原生 API 的完整流程
前端
whysqwhw1 小时前
Hippy 跨平台框架扩展原生自定义组件
前端
OEC小胖胖1 小时前
页面间的导航:`<Link>` 组件和 `useRouter`
前端·前端框架·web·next.js