当前位置: 首页 > news >正文

搭建本地开发服务器

搭建本地开发服务器

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

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

  1. 通过命令 yarn add webpack-dev-server 安装 webpack 本地开发服务器插件。

在这里插入图片描述


  1. 在之前 webpack.config.js 配置的基础上额外添加本地开发服务器配置。
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. 保存样式文件后直接访问刚才打开的页面,可以看到已经实时更新了。

在这里插入图片描述

原文链接:菜园前端

相关文章:

搭建本地开发服务器

搭建本地开发服务器 :::warning 注意 在上一个案例的基础上添加本地开发服务器,请保留上个案例的代码。如需要请查看 Webpack 使用。 ::: 搭建本地开发服务器这一个环节是非常有必要的,我们不可能每次修改源代码就重新打包一次。这样的操作是不是太繁琐…...

linux脚本

程序后台运行: nohup java -jar xxx.jar &>hello.log & 后台运行java-jar命令,并且将日志输出到hello.log文件 防火墙: 开启防火墙:systemctl start firewalld 开放指定端口:firewall-cmd --zonepublic --…...

企升编辑器word编写插件

面向用户群体招投标人员,用统一的模板来编写标书,并最终合并标书。项目经理,编写项目开发计划书,项目验收文档等。开发人员,编写项目需求规格说明书、设计说明书、技术总结等文档。其他文档编写工作量较多的岗位人员。…...

怎么在JMeter中的实现关联

我们一直用的phpwind这个系统做为演示系统, 如果没有配置好的同学, 请快速配置之后接着往下看哦. phpwind发贴时由于随着登陆用户的改变, verifycode是动态变化的, 因此需要用到关联. LoadRunner的关联函数是reg_save_param, Jmeter的关联则是利用后置处理器来完成. 在需要查…...

算法通关村第六关——如何使用中序和后序来恢复一颗二叉树

1 树的基础知识 1.1 树的定义 树(Tree):表现得是一种层次关系,为 n ( n ≥ 0 ) n(n≥0) n(n≥0)个节点构成的有限集合,当n0时,称为空树,对于任一…...

leetcode算法题--判断是否能拆分数组

原题链接:https://leetcode.cn/problems/check-if-it-is-possible-to-split-array/ 一开始思路想错了。。导致浪费很多时间 其实只要能找到存在一个子数组,子数组长度为2,这个子数组符合条件就一定能拆分。。 func canSplitArray(nums []i…...

基于Flask的模型部署

基于Flask的模型部署 一、背景 Flask:一个使用Python编写的轻量级Web应用程序框架; 首先需要明确模型部署的两种方式:在线和离线; 在线:就是将模型部署到类似于服务器上,调用需要通过网络传输数据&…...

【资料分享】全志科技T507-H开发板规格书

1 评估板简介 创龙科技TLT507-EVM是一款基于全志科技T507-H处理器设计的4核ARM Cortex-A53国产工业评估板,主频高达1.416GHz,由核心板和评估底板组成。核心板CPU、ROM、RAM、电源、晶振等所有器件均采用国产工业级方案,国产化率100%。同时,评估底板大部分元器件亦采用国产…...

2023华数杯数学建模C题思路 - 母亲身心健康对婴儿成长的影响

# 1 赛题 C 题 母亲身心健康对婴儿成长的影响 母亲是婴儿生命中最重要的人之一,她不仅为婴儿提供营养物质和身体保护, 还为婴儿提供情感支持和安全感。母亲心理健康状态的不良状况,如抑郁、焦虑、 压力等,可能会对婴儿的认知、情…...

【Kaggle】Identify Contrails to Reduce Global Warming 比赛数据集的可视化(含源代码)

一、数据简单解读 卫星图像最初来自&#xff1a; https://www.goes-r.gov/spacesegment/abi.html高级基线成像仪是GOES-R系列中用于对地球天气、海洋和环境进行成像的主要仪器。ABI用16个不同的光谱波段观察地球&#xff08;上一代GOES只有<>个&#xff09;&#xff0c…...

Spring(12) BeanFactory 和 ApplicationContext 区别

目录 一、BeanFactory 和 ApplicationContext 区别&#xff1f;二、既然 Spring Boot 中使用的是 ApplicationContext 进行应用程序的启动和管理&#xff0c;那么 Spring Boot 会用到 BeanFactory 吗&#xff1f; 一、BeanFactory 和 ApplicationContext 区别&#xff1f; Bea…...

git的日常使用

加入忽略列表&#xff1a;在.gitignore中加入忽略的文件&#xff0c;build/ 表示build文件夹下&#xff0c;*.jar 表示以jar结尾的&#xff0c;用换行符隔开将另一个分支合并到当前分支&#xff1a;git merge xxx冲突出现&#xff0c;可以看看这里&#xff1a;详解Git合并冲突—…...

【Spring Boot】请求参数传json对象,后端采用(pojo)CRUD案例(102)

请求参数传json对象&#xff0c;后端采用&#xff08;pojo&#xff09;接收的前提条件&#xff1a; 1.pom.xml文件加入坐标依赖&#xff1a;jackson-databind 2.Spring Boot 的启动类加注解&#xff1a;EnableWebMvc 3.Spring Boot 的Controller接受参数采用&#xff1a;Reque…...

layui之layer弹出层的icon数字及效果展示

layer的icon样式 icon如果在信息提示弹出层值(type为0)可以传入0-6&#xff0c;icon与图标对应关系如下&#xff1a; 如果是加载层&#xff08;type为3&#xff09;可以传入0-2&#xff0c;icon与图标对应关系如下&#xff1a;...

Python selenium对应的浏览器chromedriver版本不一致

1、chrome和chromedriver版本不一致导致的&#xff0c;我们只需要升级下chromedriver的版本即可 浏览器版本查看 //打开google浏览器直接访问&#xff0c;查看浏览器版本 chrome://version/ 查看chromedriver的版本 //查看驱动版本 chromedriver chromedriver下载 可看到浏…...

Redis的安装方法与基本操作

目录 前言 一、REDIS概述 二、REDIS安装 1、编译安装 2.yum安装 三、Redis的目录结构 四、基础命令解析 五、在一台服务器上启动多个redis 六、数据库的基本操作 &#xff08;一&#xff09;登录数据库 &#xff08;二&#xff09;基础命令 七、Redis持久化 &#xff08;一&…...

选读SQL经典实例笔记20_Oracle语法示例

1. 计算一年有多少天 1.1. sql select Days in 2005: ||to_char(add_months(trunc(sysdate,y),12)-1,DDD)as reportfrom dualunion allselect Days in 2004: ||to_char(add_months(trunc(to_date(01-SEP-2004),y),12)-1,DDD)from dual REPORT ----------------- Days in 200…...

JAVA细节/小技巧

一、 Callable类可以实现返回结果的多线程。实现Callable类&#xff0c;然后实例化一个对象传递给FutureTask&#xff0c;然后把FutureTask对象传递给Thread对象&#xff0c;执行start即可开始多线程。FutureTask对象执行get函数可以获得Callable类中call函数的返回值&#xf…...

jmeter如何压测和存储

一、存储过程准备&#xff1a; 1、建立一个空表&#xff1a; 1 CREATE TABLE test_data ( id NUMBER, name VARCHAR2(50), age NUMBER ); 2、建立一个存储过程&#xff1a; 1 2 3 4 5 6 7 8 9 CREATE OR REPLACE PROCEDURE insert_test_data (n IN NUMBER) AS BEGIN --E…...

一个月学通Python(三十三):Python并发编程在爬虫中的应用

专栏介绍 结合自身经验和内部资料总结的Python教程,每天3-5章,最短1个月就能全方位的完成Python的学习并进行实战开发,学完了定能成为大佬!加油吧!卷起来! 全部文章请访问专栏:《Python全栈教程(0基础)》 再推荐一下最近热更的:《大厂测试高频面试题详解》 该专栏对…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

React Native 导航系统实战(React Navigation)

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...