前端项目练习(练习-005-webpack-03)

学习前,首先,创建一个web-005项目,内容和web-004一样。(注意将package.json中的name改为web-005)

前面的代码中,打包工作已经基本完成了,下面开始在本地启动项目。这里需要用到webpack-dev-server插件 (简写: dev-server)。这个插件可用于快速开发应用程序,相当于webpack的开发服务器。它会自动监听代码变化,自动打包构建,自动更新刷新浏览器。

它不会产生dist文件,将打包结果暂时存在内存中,内部的http-sever访问这些文件并读取数据,发送给浏览器。

它会减少磁盘的读取,提高构建效率。

首先,安装webapck-dev-server :

npm install webpack-dev-server --save-dev

安装完成后,配置webpack.config.js,在里面加一个  devServer  配置,

其中,open:true 表示启动成功后,自动打开浏览器,port表示端口,compress:true 表示压缩。

接下来配置 package.json ,在scripts 中增加一条dev指令:

这样运行 npm run dev 就可以运行项目了:

不用手动访问,会自动在浏览器里面打开页面:

字体显示红色说明css引入没问题,打开浏览器控制台,看到打印的日志:

说明js文件引入没有问题。

在项目启动完后,不重启项目的情况下,修改js文件和css文件,可以看到项目可以自动刷新并执行最新的代码。

不过目前的项目不支持html热修改。需要新增一个loader,html-loader,首先执行安装:

npm install --save-dev html-loader

下一步,在js文件中,引入html文件:

然后在webpack.config.js中配置html-loader:

执行npm run dev重新启动项目,修改三个文件代码,可以看到,在不重启的情形下,三个文件代码修改的效果都可以实时看到。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/141539.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

React(react18)中组件通信05——redux ➕ react-redux(含数据共享)

React(react18)中组件通信05——redux ➕ react-redux(含数据共享) 1. 前言1.1 React中组件通信的其他方式1.2 介绍React-Redux1.2.1 简单介绍React-Redux1.2.2 官网 1.3 安装react-redux 2. 简单改写redux的例子2.1 提供store2.2…

opencv形态学-腐蚀

opencv形态学-腐蚀 腐蚀就是取每一个位置结构元领域内最小值作为该位置的输出灰度值; 结构元有很多,一般采用矩形,圆 解析 下图左测是原始图片的灰阶,右边是经过3X3矩形腐蚀后的结果,我们拿19,44,99进行分析&#…

css实现渐变电量效果柱状图

我们通常的做法就是用echarts来实现 比如 echarts象形柱图实现电量效果柱状图 接着我们实现进阶版,增加渐变效果 echarts分割柱形图实现渐变电量效果柱状图 接着是又在渐变的基础上,增加了背景色块的填充 echarts实现渐变电量效果柱状图 其实思路是一…

【刷题笔记9.25】LeetCode:相交链表

LeetCode:相交链表 一、题目描述 给你两个单链表的头节点 headA 和 headB ,请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点,返回 null 。 二、分析及代码 方法一:使用哈希Set集合 (注意…

【面试算法——动态规划 19】最长回文子序列 (hard)让字符串成为回文串的最少插入次数

516. 最长回文子序列 链接: 516. 最长回文子序列 给你一个字符串 s ,找出其中最长的回文子序列,并返回该序列的长度。 子序列定义为:不改变剩余字符顺序的情况下,删除某些字符或者不删除任何字符形成的一个序列。 示例 1&…

opencv for unity package在unity中打开相机不需要dll

下载OpenCV for Unity 导入后,里面有很多案例 直接打开就可以运行 打开相机

TCP 和 UDP哪个更好

传输控制协议 (TCP) 和用户数据报协议 (UDP) 是互联网的基础支柱,支持从网络源到目的地的不同类型的数据传输。TCP更可靠,而UDP优先考虑速度和效率。本文解释了两种协议的工作原理,并详细讨论了…

vuejs - - - - - 使用code编辑器codemirror

使用code编辑器codemirror 0. 效果图1. 依赖安装2. 组件封装3. 组件使用 0. 效果图 列表实现参考: 列表实现代码 1. 依赖安装 npm install codemirror codemirror-editor-vue3 jsonlint-mod 2. 组件封装 code-mirror-editor.vue <template><VueCodeMirrorclas…

Java之IO流概述

1.1 什么是IO 生活中&#xff0c;你肯定经历过这样的场景。当你编辑一个文本文件&#xff0c;忘记了ctrls &#xff0c;可能文件就白白编辑了。当你电脑上插入一个U盘&#xff0c;可以把一个视频&#xff0c;拷贝到你的电脑硬盘里。那么数据都是在哪些设备上的呢&#xff1f;键…

Nginx WEB访问与Linux授权约束

看到所有文件的权限都是没有的&#xff0c;即便所有的权限都没有即使nginx做了配置&#xff0c;这些都是正确的。那么在浏览器真正去访问的时候是不能访问的。 [rootjenkins html]# ls -l total 4 drwxr-xr-x 2 root root 23 Sep 16 17:43 dist ---------- 1 root root 33 Sep …

利用C++开发一个迷你的英文单词录入和测试小程序-增强功能

小玩具基本完成之后&#xff0c;在日常工作中&#xff0c;记录一些单词&#xff0c;然后定时再复习下&#xff0c;还真的有那么一点点用&#xff08;毕竟自己做的小玩具&#xff09;。 在使用过程中&#xff0c;遇到不认识的单词&#xff0c;总去翻译软件翻译&#xff0c;然后…

蓝桥杯每日一题2023.9.24

九进制转十进制 - 蓝桥云课 (lanqiao.cn) 题目描述 分析 #include<bits/stdc.h> using namespace std; int main() {cout << 2 * 9 * 9 * 9 0 * 9 * 9 2 * 9 2;return 0; } 顺子日期 - 蓝桥云课 (lanqiao.cn) 题目描述 分析 全部枚举 #include<bits/s…

MAC word 如何并列排列两张图片

系统&#xff1a;MAC os 参考博客 https://baijiahao.baidu.com/s?id1700824516945958911&wfrspider&forpc 步骤1 新建一个word文档和表格 修改表格属性 去掉自动重调尺寸以适应内容 插入图片 在表格的位置插入对应的图片如下 去除边框 最终结果如下

腾讯mini项目-【指标监控服务重构】2023-08-27

今日已办 Docker Monitoring with cAdvisor, Prometheus and Grafana Docker Monitoring with cAdvisor, Prometheus and Grafana | by Mertcan Simsek | MediumMonitoring Docker container metrics using cAdvisor | Prometheus prometheus.yml global:scrape_interval: …

macOS 下 Termius 中文显示为乱码

&#x1f468;&#x1f3fb;‍&#x1f4bb; 热爱摄影的程序员 &#x1f468;&#x1f3fb;‍&#x1f3a8; 喜欢编码的设计师 &#x1f9d5;&#x1f3fb; 擅长设计的剪辑师 &#x1f9d1;&#x1f3fb;‍&#x1f3eb; 一位高冷无情的编码爱好者 大家好&#xff0c;我是 DevO…

94 # express 兼容老的路由写法

上一节实现了错误处理中间件&#xff0c;这一节来实现兼容老的路由写法 看个 express 的二级路由的例子 const express require("express"); const userRouter require("./routes/userRouter"); const articleRouter require("./routes/articleR…

Python爬虫技术系列-02HTML解析-xpath与lxml

Python爬虫技术系列-02HTML解析-xpath与lxml 2 XPath介绍与lxml库2.1 XPath概述2.2 lxml库介绍2.2.1 lxml库安装2.2.2 lxml库基本使用2.2.3 lxml案例a.读取数据并补全b.读取数据并选取节点&#xff1a; 2 XPath介绍与lxml库 参考连接&#xff1a; XPath教程 https://www.w3sch…

高效管理生活:Microsoft To Do for Mac 微软待办事项软件

在日常生活中&#xff0c;我们经常面临着琐碎的任务和繁忙的安排。为了更好地管理自己的时间和事务&#xff0c;一款强大而智能的待办事项软件是必不可少的。Microsoft To Do for Mac 微软待办事项软件将助您高效管理生活&#xff0c;让每件事都尽在掌握。 Microsoft To Do fo…

腾讯mini项目-【指标监控服务重构-会议记录】2023-07-26

2023-07-26组长会议纪要 A组 项目对齐和问题 分配需求&#xff0c;SLI指标上报&#xff0c;暂时没有实际效果 每个人负责一条指标&#xff0c;同步代码&#xff0c;时间问题还是难题跟B组同学请教&#xff0c;答疑 问题&#xff1a;启动 Tracer 【已解决】 环境问题&#xf…

数据结构:堆的简单介绍

目录 堆的介绍:(PriorityQueue) 大根堆:根节点比左右孩子节点大 小根堆:根节点比左右孩子节点小 堆的存储结构: 为什么二叉树在逻辑上用满二叉树结构,而不是普通二叉树呢? 因为如果是普通二叉树会造成资源的浪费​编辑 堆的介绍:(PriorityQueue) 堆又称优先级队列,何为优先…