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

41-Vue-webpack基础

news 2025/11/9 4:04:30

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

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2025/11/9 3:59:38

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

编程新知 2025/8/9 0:31:20

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

编程新知 2025/11/3 2:11:24

PL0语法，分析器实现！

简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...

编程新知 2025/11/8 8:58:44

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2025/11/8 10:15:29

高防服务器能够抵御哪些网络攻击呢？

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

编程新知 2025/9/3 19:14:38

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2025/11/7 19:36:10

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/9/27 12:03:43

宇树科技，改名了！

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

编程新知 2025/11/8 7:59:17

Chrome 浏览器前端与客户端双向通信实战

Chrome 前端&#xff08;即页面 JS / Web UI&#xff09;与客户端&#xff08;C 后端&#xff09;的交互机制&#xff0c;是 Chromium 架构中非常核心的一环。下面我将按常见场景&#xff0c;从通道、流程、技术栈几个角度做一套完整的分析&#xff0c;特别适合你这种在分析和改…...

编程新知 2025/11/7 19:15:54