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

41-Vue-webpack基础

news 2026/2/9 17:13:53

webpack基础

      • 前言
      • 什么是webpack
      • webpack的基本使用
      • 指定webpack的entry和output

前言

  • 本篇开始来学习下webpack的使用

什么是webpack

  • webpack: 是前端项目工程化的具体解决方案。

  • 主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能。

  • 好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性

webpack的基本使用

  1. 新建项目空白目录(change_coloe)，并运行 npm init –y 命令，初始化包管理配置文件 package.json
    在这里插入图片描述

  2. 新建 src 源代码目录

  3. 新建 src -> index.html 首页和 src -> index.js 脚本文件
    在这里插入图片描述

  4. 初始化首页基本的结构

说明：
1. 快捷生成html基本结构： ! + tab (英文输入法下)
2. 快速生成9个li 标签 ：ul>li{这是第$个}*9

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>修改行颜色</title>
</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>
  1. 运行 npm install jquery –S 命令，安装 jQuery

说明：

  1. -S 是 --save简写 ,作用明确包的位置在dependencies中，可省略

在这里插入图片描述
在这里插入图片描述

  1. 通过 ES6 模块化的方式导入 jQuery，实现列表隔行变色效果
// index.js文件中
// 1. ES6语法导入jqueryimport $ from 'jquery'// 2. 定义 jQuery 的入口函数
$(function () {// 3. 实现奇偶行变色// 奇数行为红色  偶数行粉色~$('li:odd').css('background-color', 'red')$('li:even').css('background-color', 'pink')})
  1. 在项目中安装 webpack

说明：

  1. -D 是 --save-dev 的简写，明确包位置在devDependencies中，
  2. dependencies 是开发和上线都会用到的包；devDependencies是开发阶段使用到的包
npm install webpack@5.42.1 webpack-cli@4.7.2 -D

在这里插入图片描述

  1. 在项目中配置webpack文件
    • 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置
    module.exports = {// mode 代表 webpack 运行的模式，可选值有两个 development 和 production// 结论：开发时候一定要用 development，因为追求的是打包的速度，而不是体积；// 反过来，发布上线的时候一定能要用 production，因为上线追求的是体积小，而不是打包速度快！mode: 'development',
}
    • 在 package.json 的 scripts 节点下，新增 dev 脚本如下
      "scripts": {"dev": "webpack" // 可以通过npm run 运行，如 npn run dev}
    • 在项目目录下执行 npm run dev 命令，启动 webpack 进行项目的打包构建
      在这里插入图片描述
  • 说明：webpack.config.js 作用：是 webpack 的配置文件。webpack 在真正开始打包构建之前，会先读取这个配置文件，
    从而基于给定的配置，对项目进行打包
  1. 在index.html中导入打包生成的main.js
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>修改行颜色</title><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>

效果如下图
在这里插入图片描述

指定webpack的entry和output

在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：

  1. 默认的打包入口文件为 src -> index.js
  2. 默认的输出文件路径为 dist -> main.js
  • 在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口
const path = require('path')module.exports = {mode: 'development',// entry: '指定要处理哪个文件'    __dirname当前文件目录entry: path.join(__dirname, './src/index1.js'),// 指定生成的文件要存放到哪里output: {// 存放的目录path: path.join(__dirname, 'dist'),// 生成的文件名filename: 'bundle.js'}
}

相关文章：

41-Vue-webpack基础

webpack基础 前言什么是webpackwebpack的基本使用指定webpack的entry和output 前言 本篇开始来学习下webpack的使用 什么是webpack webpack: 是前端项目工程化的具体解决方案。 主要功能&#xff1a;它提供了友好的前端模块化开发支持&#xff0c;以及代码压缩混淆、处理浏览…...

编程日记 2024/3/24 8:36:42

数据仓库的分层理论

数据仓库的分层理论是为了更好地组织和管理数据&#xff0c;支持复杂的数据分析和决策支持。在这一理论中&#xff0c;数据仓库被分为多个层次&#xff0c;每个层次都有其特定的作用和设计原则。以下是每一层的详细介绍&#xff0c;以及以销售人员为例的Doris建表实例。 ODS层…...

编程日记 2024/3/24 8:30:36

MySQL 8.0-索引- 不可见索引（invisible indexes）

概述 MySQL 8.0引入了不可见索引(invisible index)&#xff0c;这个在实际工作用还是用的到的&#xff0c;我觉得可以了解下。 在介绍不可见索引之前&#xff0c;我先来看下invisible index是个什么或者定义。 我们依然使用拆开来看&#xff0c;然后再把拆出来的词放到MySQL…...

编程日记 2024/3/24 8:28:35

Uibot6.0 (RPA财务机器人师资培训第3天 ）财务招聘信息抓取机器人案例实战

训练网站&#xff1a;泓江科技 (lessonplan.cn)https://laiye.lessonplan.cn/list/ec0f5080-e1de-11ee-a1d8-3f479df4d981https://laiye.lessonplan.cn/list/ec0f5080-e1de-11ee-a1d8-3f479df4d981https://laiye.lessonplan.cn/list/ec0f5080-e1de-11ee-a1d8-3f479df4d981(本博…...

编程日记 2024/3/24 8:27:34

Eureka和Nacos的关系

目录 它们的比较&#xff1a; 结论&#xff1a; Eureka和Nacos都是服务发现和注册中心&#xff0c;它们在微服务架构中扮演着关键角色&#xff0c;但它们是由不同的组织开发的&#xff0c;服务于类似但不完全相同的目的。以下是它们之间的关系&#xff1a; Eureka&#xff1a…...

编程日记 2024/3/24 8:24:31

极简自建web视频会议，私有云，rtmp/rtsp/webrtc一键参会直播会议互动方案

随着视频互动深入工作日常&#xff0c;很多客户需要自建一个会议&#xff0c;监控的交互平台&#xff0c;目前外面不管是开源还是非开源的平台&#xff0c;都是极为复杂&#xff0c;一般linux安装库关联部署复杂&#xff0c;非技术人员根本没办法使用&#xff0c;不方便集成部署…...

编程日记 2024/3/24 8:23:30

5G智能网关助力工业铸造设备监测升级

随着物联网技术的迅猛发展和工业4.0浪潮的推进&#xff0c;传统工业正面临着严峻的转型升级压力。在这一背景下&#xff0c;铸造行业——这一典型的传统重工业领域&#xff0c;也必须积极探索借助5G、物联网、边缘计算等技术提升生产经营效率的新路径。 本文就基于佰马合作伙伴…...

编程日记 2024/3/24 8:22:29

奇舞周刊第523期：来自 rust 生态的强烈冲击？谈谈 Leptos 在语法设计上的精妙之处...

奇舞推荐 ■ ■ ■ 来自 rust 生态的强烈冲击&#xff1f;谈谈 Leptos 在语法设计上的精妙之处 过去很长一段时间&#xff0c;前端框架们都在往响应式的方向发展。同时又由于 React hooks 的深远影响&#xff0c;函数式 响应式成为了不少前端心中最理想的前端框架模样。Solid …...

编程日记 2024/3/24 8:21:28

《边缘计算：连接未来的智慧之桥》

随着物联网、5G等技术的快速发展&#xff0c;边缘计算作为一种新兴的计算模式&#xff0c;正逐渐引起人们的广泛关注。边缘计算通过将数据处理和存储功能放置在距离数据产生源头更近的位置&#xff0c;实现了更快速、更可靠的数据处理和交换&#xff0c;为各行各业带来了前所未…...

编程日记 2024/3/24 8:18:25

php 各种魔术函数的触发条件

2024.3.20 1、__construct() __construct() 用于在创建对象时自动触发 当使用 new 关键字实例化一个类时&#xff0c;会自动调用该类的 __construct() 方法 <?php class MyClass {public function __construct() {echo "已触发 __construct 一次";} }$obj new …...

编程日记 2024/3/24 8:17:24

Linux的学习之路：2、基础指令（1）

一、ls指令 上篇文章已经说了一点点的ls指令&#xff0c;不过那还是不够的&#xff0c;这篇文章会介绍更多的指令&#xff0c;最起码能使用命令行进行一些简单的操作&#xff0c;下面开始介绍了 ls常用选项 -a 列出目录下的所有文件&#xff0c;包括以 . 开头的隐含文件。 -d…...

编程日记 2024/3/24 8:10:16

0103设计算法-算法基础-算法导论第三版

文章目录 一、分治法二、分析分治算法结语 我们可以选择使用的算法设计技术有很多。插入排序使用了增量方法&#xff1a;在排序子数组 A [ 1 ⋯ j − 1 ] A[1\cdots j-1] A[1⋯j−1]后&#xff0c;将单个元素 A [ j ] A[j] A[j]插入子数组的适当位置&#xff0c;产生排序好的子…...

编程日记 2024/3/24 8:09:15

[NCTF2019]SQLi ---不会编程的崽

欸嘿&#xff0c;继续sql注入。又是新的sql注入类型 很直接哦&#xff0c;给出了sql查询语句。简单扫描一下&#xff0c;robots.txt还能访问。里边提示hint.txt $black_list "/limit|by|substr|mid|,|admin|benchmark|like|or|char|union|substring|select|greatest|%00…...

编程日记 2024/3/24 8:06:11

上位机开发 halcon坐标转轴坐标

背景 上位机开发中有一种相机叫标定相机，主要是有来给某些要进行根据CAD图点位计算时当前产品实际点位坐标时使用的一种标定测量相机。主要原理是根据两个或多个指定的标定点进行取图计算圆心坐标，再将视觉计算出的圆心坐标和取图时的轴坐标进行偏差计算。最后得到标定点轴的…...

编程日记 2024/3/24 8:03:09

[数据结构]二叉树(下)

一、二叉树的节点和深度关系 1.满二叉树 我们可以假设二叉树有N个节点&#xff0c;深度为h我们可以恒容易得到满二叉树每行的节点数&#xff0c;然后错位相减,算出节点与高度的关系。 2.完全二叉树 注意我这个是因为最后一行的节点数为1。 二、向上调整建堆和向下调整建堆的时…...

编程日记 2024/3/24 8:02:07

动手学深度学习｜notebook教程

D2L.AI&#xff5c;《动手学深度学习》Notebooks 目录 面向中文读者的能运行、可讨论的深度学习教科书 含 PyTorch、NumPy/MXNet、TensorFlow 和 PaddlePaddle 实现 被全球 70 多个国家 500 多所大学用于教学 github 下面是整理好的&#xff0c;可以直接运行的notebook 0 前…...

编程日记 2024/3/24 8:01:06

C#面：简述 .NET Framework 类库中的“命名空间”

在 C# 中&#xff0c;命名空间&#xff08;Namespace&#xff09;是一种用于组织和管理代码的机制。它提供了一种将相关的类、接口、结构体和其他类型组织在一起的方式&#xff0c;以便更好地管理和维护代码。 .NET Framework类库中的命名空间是一种逻辑上的分组&#xff0c;它…...

编程日记 2024/3/24 8:00:05

android.os.TransactionTooLargeException解决方案，Kotlin

android.os.TransactionTooLargeException解决方案&#xff0c;Kotlin 首先&#xff0c;特意制造一个让Android发生TransactionTooLargeException的场景&#xff0c;一个Activity启动另外一个Activity&#xff0c;在Intent的Bundle里面塞入一个大的ArrayList: import android.…...

编程日记 2024/3/24 7:59:04

ChatGPT智能聊天系统源码v2.7.6全开源Vue前后端+后端PHP

测试环境：Linux系统CentOS7.6、宝塔、PHP7.4、MySQL5.6，根目录public，伪静态thinkPHP，开启ssl证书 具有文章改写、广告营销文案、编程助手、办公达人、知心好友、家庭助手、出行助手、社交平台内容、视频脚本创作、AI绘画、思维导图等功能 ai通道：文心一言、MiniMax、智…...

编程日记 2024/3/24 7:48:55

汇丰：当前的美股是泡沫吗？

汇丰认为&#xff0c;当前的风险资产并不构成泡沫&#xff0c;更类似于2017年的市场环境&#xff0c;风险资产有望继续稳步上升。 隔夜美股飙涨&#xff0c;标普创三个月最大周涨&#xff0c;纳指收盘创历史新高。结合去年以来的强劲表现&#xff0c;有观点认为由科技股支撑的…...

编程日记 2024/3/24 7:47:55

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

编程新知 2025/9/27 2:43:26

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

编程新知 2026/1/24 6:22:43

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2026/1/25 13:13:20

《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

编程新知 2026/2/2 1:48:09

linux 错误码总结

1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/9/16 22:48:47

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/11/8 16:25:01

智能仓储的未来：自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

编程新知 2026/2/1 2:49:30

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2026/2/5 4:21:48

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2026/1/30 16:24:23

【VLNs篇】07：NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

编程新知 2026/2/7 4:16:41