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

前端学习之webpack

news 2025/7/3 10:43:37

概述

webpack是一个流行的前端项目构建工具（打包工具），可以解决当前web开发中所面临的问题。
webpack提供了友好的模块化支持，以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能，从而让程序员把工作重心放到具体的功能实现上，提高了开发效率和项目的可维护性。

webpack的基本使用

  1. 创建列表各行变色项目
    ①新建项目空白目录，并运行npm init -y命令，初始化包管理配置文件package.json
    ②新建src源代码目录
    ③新建src->index.html首页
    ④初始化首页基本的结构，即给index.html添加如下内容：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- <script src="./index.js"></script> --><script src="../dist/main.js"></script>
</head>
<body><ul><li>这是第1个标签</li><li>这是第2个标签</li><li>这是第3个标签</li><li>这是第4个标签</li><li>这是第5个标签</li><li>这是第6个标签</li><li>这是第7个标签</li><li>这是第8个标签</li><li>这是第9个标签</li></ul>
</body>
</html>

⑤运行npm install jquery -s命令，安装jQuery
⑥通过模块化的形式，实现列表隔行变色的效果
创建一个index.js文件，加入以下内容：

import $ from 'jquery'
//给奇偶行设置不同的背景色
$(function(){$('li:odd').css('backgroundColor','pink')$('li:even').css('backgroundColor','green')
})

然后在index.html文件中通过以下命令将index.js引入进来：

<script src="./index.js"></script>

但是我们通过浏览器查看，发现列表变色并没有设置成功，这是因为index.js里面的内容是ES6的书写格式，浏览器不识别；这个时候我们可以使用webpack进行打包，将没有兼容性的代码转化为有兼容性的代码，最后在index.html中引入的应该是我们使用webpack转换后的js代码，具体操作见下述2
2. 在项目中安装和配置webpack
①运行npm install webpack webpack-cli -D命令，安装webpack相关的包
②在项目根目录中，创建名为webpack.config.js的webpack配置文件
③在webpack配置文件中，初始化如下基本配置

module.exports={mode:'development'   //mode用来指定构建模式
}

④在package.json配置文件中的scripts节点下，新增dev脚本如下：

"scripts":{"dev":"webpack"    //scripts节点下的脚本可以通过npm run 执行
}

⑤在终端执行npm run dev命令，启动webpack进行项目打包
执行完这个命令后会在根目录生成一个dist文件夹，文件夹中有一个main.js文件，就是我们转换后的文件，将这个文件引入index.html中，就能够实现上述的列表变色了

相关文章：

前端学习之webpack

概述 webpack是一个流行的前端项目构建工具&#xff08;打包工具&#xff09;&#xff0c;可以解决当前web开发中所面临的问题。 webpack提供了友好的模块化支持&#xff0c;以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能&#xff0c;从而让程序员把工作重心放到具…...

编程日记 2023/10/30 22:43:54

2023NOIP A层联测20-旅行

小 A 旅行到了远方的一座城市&#xff0c;其内部的道路可以被视为一张包含恰好 n n n 个点以及 n n n 条边的无向连通图。这里的居民可以用一种特质的墨水来改变图中某一条边的颜色。 居民们的狂欢节即将开始了&#xff0c;且节日会持续 m m m 天。每一天&#xff0c;居民们…...

编程日记 2023/10/30 22:42:53

STM32 中断NVIC详解，配置及示例

NVIC全称 Nested Vectored Controller 嵌套向量中断控制器 它是一种硬件设备&#xff0c;用于管理和协调处理器的中断请求。NVIC可以管理多个中断请求&#xff0c;并按优先级处理它们。当一个中断请求到达时&#xff0c;NVIC会确定其优先级并决定是否应该中断当前执行的程序&am…...

编程日记 2023/10/30 22:41:52

10.30英语期中稿

influence of Chinese and Japanese literary culture on the country and the world, and compare the differences between the two 对自己文化影响 中日文学文化比较 表达&#xff0c;餐饮&#xff0c;服装 相似点与不同点 与日本友人交流 draft Chinese and Japanes…...

编程日记 2023/10/30 22:39:51

二维数组如何更快地遍历

二维数组如何更快地遍历 有时候&#xff0c;我们会发现&#xff0c;自己的代码和别人的代码几乎一模一样&#xff0c;但运行时间差了很多&#xff0c;别人是 AC \text{AC} AC&#xff0c;你是 TLE \text{TLE} TLE&#xff0c;这是为什么呢&#xff1f; 一个可能的原因是数组的…...

编程日记 2023/10/30 22:35:48

【网络安全】Seeker内网穿透追踪定位

Seeker追踪定位对方精确位置 前言一、kali安装二、seeker定位1、ngrok平台注册2、获取一次性邮箱地址3、ngrok平台登录4、ngrok下载5、ngrok令牌授权6、seeker下载7、运行seeker定位8、运行隧道开启监听9、伪装链接10、用户点击&#xff08;获取定位成功&#xff09;11、利用经…...

编程日记 2023/10/30 22:34:47

Spring Boot 3系列之一（初始化项目）

近期&#xff0c;JDK 21正式发布&#xff0c;而Spring Boot 3也推出已有一段时间。作为这两大技术领域的新一代标杆&#xff0c;它们带来了许多令人振奋的新功能和改进。尽管已有不少博客和文章对此进行了介绍&#xff0c;但对于我们这些身处一线的开发人员来说&#xff0c;有些…...

编程日记 2023/10/30 22:33:46

用python判断一个数是否为素数

判断一个数是否为素数可以使用以下方法&#xff1a; 排除特殊情况&#xff1a;首先判断该数是否小于等于1&#xff0c;因为素数定义中&#xff0c;素数必须大于1。如果小于等于1&#xff0c;则该数不是素数。 除尽法&#xff08;试除法&#xff09;&#xff1a;从2开始&#x…...

编程日记 2023/10/30 22:32:44

FreeRTOS_信号量之二值信号量

目录 1. 信号量简介 2. 二值信号量 2.1 二值信号量简介 2.1.1 二值信号量无效 2.1.2 中断释放信号量 2.1.3 任务获取信号量成功 2.1.4 任务再次进入阻塞态 2.2 创建二值信号量 2.2.1 vSemaphoreCreateBinary() 2.2.2 xSemaphoreCreateBinary() 2.2.3 xSemaphoreCrea…...

编程日记 2023/10/30 22:31:44

使用Gateway解决跨域问题时配置文件不生效的情况之一

首先html文件只有一个发送ajax请求 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content&q…...

编程日记 2023/10/30 22:30:42

【火影手游】新版押镖护送高分攻略

文章目录 Part.I IntroductionPart.II 迪达拉视角1、打栅栏2、石头边&#xff0c;打石头和栅栏3、石头边&#xff0c;踩封印&#xff0c;撞力士4、大树前&#xff0c;打石头和栅栏5、石头边&#xff0c;给佩恩当路标6、后一前二接大招7、补伤害 Part.III 佩恩视角1、头进洞&…...

编程日记 2023/10/30 22:28:40

【JVM】类的声明周期（加载、连接、初始化）

&#x1f40c;个人主页&#xff1a; &#x1f40c; 叶落闲庭 &#x1f4a8;我的专栏&#xff1a;&#x1f4a8; c语言 数据结构 javaEE 操作系统 Redis 石可破也&#xff0c;而不可夺坚&#xff1b;丹可磨也&#xff0c;而不可夺赤。 JVM 一、类的声明周期&#xff08;加载阶段…...

编程日记 2023/10/30 22:27:39

开源3D激光（视觉）SLAM算法汇总（持续更新）

原文连接 目录 一、Cartographer 二、hdl_graph_slam 三、LOAM 四、LeGO-LOAM 五、LIO-SAM 六、S-LOAM 七、M-LOAM 八、livox-loam 九、Livox-Mapping 十、LIO-Livox 十一、FAST-LIO2 十二、LVI-SAM 十三、FAST-Livo 十四、R3LIVE 十五、ImMesh 十六、Point-LIO 一、Cartograph…...

编程日记 2023/10/30 22:26:37

绕WAF手法总结

云锁 被拦截 http://www.test123.com/article.php?id1%20union%20select%201,2,3 绕过 http://www.test123.com/article.php?id-1/*!36000union*//*!36000distinct*//*!36000select*/1,2,user() 360websec 被拦截 http://www.xxx.com.cn/productshow.php?id79 绕过 http:/…...

编程日记 2023/10/30 22:25:36

Linux mv命令：移动文件或改名

mv 命令&#xff08;move 的缩写&#xff09;&#xff0c;既可以在不同的目录之间移动文件或目录&#xff0c;也可以对文件和目录进行重命名。该命令的基本格式如下&#xff1a; [rootlocalhost ~]# mv 【选项】 源文件 目标文件 -f&#xff1a;强制覆盖&#xff0c;如果目标文…...

编程日记 2023/10/30 22:24:35

在 Elasticsearch 中丰富你的 Elasticsearch 文档

作者&#xff1a;David Pilato 对于 Elasticsearch&#xff0c;我们知道联接应该在 “索引时” 而不是查询时完成。 本博文是一系列三篇博文的开始&#xff0c;因为我们可以在 Elastic 生态系统中采取多种方法。 我们将介绍如何在 Elasticsearch 中做到这一点。 下一篇博文将介…...

编程日记 2023/10/30 22:23:33

探营云栖大会：蚂蚁集团展出数字人全栈技术，三大AI“机器人”引关注

一年一度的科技盛会云栖大会将于10月31日正式开幕。30日&#xff0c;记者来到云栖大会展区探营&#xff0c;提前打卡今年上新的“黑科技”。 记者在蚂蚁集团展馆看到&#xff0c;超1亿人参与的亚运“数字火炬手”全栈技术首次公开展示&#xff0c;还可体验基于数字人技术的“数…...

编程日记 2023/10/30 22:21:31

hdlbits系列verilog解答（8位宽移位寄存器）-24

文章目录 一、问题描述二、verilog源码三、仿真结果一、问题描述 这项练习是module_shift移位寄存器的延伸。模块端口不是只有单个引脚，我们现在有以向量作为端口的模块，您将在其上附加线向量而不是普通线网数据。与 Verilog 中的其他位置一样，端口的向量长度不必与连接到它…...

编程日记 2023/10/30 22:20:31

LeetCode 275. H 指数 II

原题链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 题目描述 给你一个整数数组 citations &#xff0c;其中 citations[i] 表示研究者的第 i 篇论文被引用的次数&#xff0c;citations 已经按照 升序排列 。计算并返回该研究者的 h…...

编程日记 2023/10/30 22:19:29

Android 优质的UI组件汇总

1、RuleView &#xff1a;Android自定义标尺控件(选择身高、体重等) 链接&#xff1a;https://github.com/cStor-cDeep/RuleView 2、DashboardView &#xff1a;Android自定义仪表盘View&#xff0c;仿新旧两版芝麻信用分、炫酷汽车速度仪表盘 链接&#xff1a;https://git…...

编程日记 2023/10/30 22:17:28

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2025/6/28 16:59:15

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/6/15 19:07:20

23-Oracle 23 ai 区块链表（Blockchain Table）

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

编程新知 2025/7/2 0:49:04

无法与IP建立连接，未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2025/7/2 14:54:02

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

编程新知 2025/7/2 15:27:24

聊聊 Pulsar：Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

编程新知 2025/7/2 12:31:45

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/6/21 18:39:26

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

编程新知 2025/6/24 6:22:14

项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

编程新知 2025/6/26 10:08:29

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

编程新知 2025/7/3 3:02:23