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

前端学习之webpack

news 2026/4/1 6:31:55

概述

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

OffscreenCanvas黑科技：让你的网页动画性能提升300%的配置指南

OffscreenCanvas黑科技&#xff1a;让你的网页动画性能提升300%的配置指南 当网页动画开始卡顿&#xff0c;用户的体验就会直线下降。传统Canvas渲染在主线程执行&#xff0c;复杂的图形运算很容易阻塞UI响应。OffscreenCanvas的出现彻底改变了这一局面——它允许你将绘制逻辑转…...

编程新知 2026/4/1 5:51:09

深度解析：基于摄像头的远程生理监测工具箱rPPG-Toolbox实战指南

深度解析&#xff1a;基于摄像头的远程生理监测工具箱rPPG-Toolbox实战指南 【免费下载链接】rPPG-Toolbox rPPG-Toolbox: Deep Remote PPG Toolbox (NeurIPS 2023) 项目地址: https://gitcode.com/gh_mirrors/rp/rPPG-Toolbox 远程生理监测技术正在医疗健康领域引发革命…...

编程新知 2026/4/1 5:08:53

AutoGen Studio效果展示：看Qwen3-4B如何协作完成网页设计

AutoGen Studio效果展示&#xff1a;看Qwen3-4B如何协作完成网页设计 1. AutoGen Studio简介 AutoGen Studio是一个基于微软AutoGen框架开发的低代码界面工具&#xff0c;它让构建和组合AI代理变得简单直观。通过这个平台&#xff0c;你可以快速创建多个AI代理&#xff0c;为…...

编程新知 2026/4/1 4:23:54

智能表格在敏捷项目管理中的工时统计实践

1. 为什么敏捷团队需要智能工时统计 在敏捷开发中&#xff0c;两周一次的迭代就像一场短跑比赛。我见过太多团队在冲刺过半时才发现工时严重超支&#xff0c;这时候再调整已经来不及了。传统Excel表格需要手动更新公式&#xff0c;光是合并不同成员的工作量报表就能消耗半天时间…...

编程新知 2026/4/1 3:02:45

别再找插件了！手把手教你用uni-app的Canvas API画一个带渐变和刻度的环形进度条

原生Canvas魔法&#xff1a;在uni-app中打造高性能渐变环形进度条 每次看到那些酷炫的数据可视化图表&#xff0c;你是不是也想过自己动手实现&#xff1f;但面对复杂的第三方图表库文档和性能问题又望而却步。今天我要分享的是如何用uni-app原生Canvas API&#xff0c;从零开始…...

编程新知 2026/4/1 2:44:24

10分钟掌握全网资源下载神器：res-downloader从入门到精通

10分钟掌握全网资源下载神器&#xff1a;res-downloader从入门到精通 【免费下载链接】res-downloader 视频号、小程序、抖音、快手、小红书、直播流、m3u8、酷狗、QQ音乐等常见网络资源下载! 项目地址: https://gitcode.com/GitHub_Trending/re/res-downloader 你是否遇…...

编程新知 2026/4/1 2:14:00

AI赋能.NET开发：让快马平台智能生成Redis缓存与消息队列集成代码

最近在做一个电商系统的订单模块&#xff0c;发现缓存和消息队列这两个组件几乎是标配。但每次从零开始集成Redis和RabbitMQ都要查半天文档&#xff0c;配置各种连接字符串&#xff0c;写一堆样板代码。直到尝试用InsCode(快马)平台的AI辅助功能&#xff0c;才发现原来这些重复…...

编程新知 2026/4/1 1:49:47

[语音转文字工具] AsrTools：让音频转写效率提升300%的开源解决方案

[语音转文字工具] AsrTools&#xff1a;让音频转写效率提升300%的开源解决方案 【免费下载链接】AsrTools ✨ AsrTools: Smart Voice-to-Text Tool | Efficient Batch Processing | User-Friendly Interface | No GPU Required | Supports SRT/TXT Output | Turn your audio in…...

编程新知 2026/4/1 1:15:09

效率提升秘籍：用快马AI一键生成nt动漫角色管理模块代码

最近在开发一个nt动漫相关的项目&#xff0c;其中角色管理模块是必不可少的部分。这个模块需要实现角色列表展示、详情查看、新增、编辑和删除等功能。传统开发方式下&#xff0c;光是搭建这些基础功能就要花费不少时间。不过我发现用InsCode(快马)平台可以快速生成这些重复性高…...

编程新知 2026/4/1 1:15:09

ISO/SAE 21434:2021（道路车辆 - 网络安全工程） 汇总

一、前言、引言&#xff08;非正文章节&#xff09;前言&#xff1a;标准制定背景、适用范围、与 ISO 26262&#xff08;功能安全&#xff09;的协同关系引言&#xff1a;网络安全对道路车辆 E/E 系统的必要性、全生命周期覆盖、风险导向原则二、正文核心章节&#xff08;1–15…...

编程新知 2026/4/1 0:38:06