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

16 —— Webpack多页面打包

news 文章来源：https://blog.csdn.net/m0_73557953/article/details/144067671 2025/1/12 1:52:29

需求：把 黑马头条登陆页面-内容页面 一起引入打包使用

步骤：

  • 准备源码（html、css、js）放入相应位置，并改用模块化语法导出

原始content.html代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css"><link rel="stylesheet"href="https://at.alicdn.com/t/c/font_4001111_4jrdiaeyvuy.css?spm=a313x.7781069.1998910419.52&file=font_4001111_4jrdiaeyvuy.css"><link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.10.3/font/bootstrap-icons.min.css"><link rel="stylesheet" href="./index.css"><title>首页-内容管理</title>
</head><body><div class="wrap"><!-- 侧边栏 --><div class="aside"><h2>黑马头条</h2><ul class="nav"><li><a href="./index.html" class="active"><span class="iconfont icon-16"></span><span>内容管理</span></a></li><li><a href="../publish/index.html"><span class="iconfont icon-fabu"></span><span>发布文章</span></a></li></ul></div><!-- 右侧区域 --><div class="main"><!-- 顶部导航 --><div class="top-nav"><div class="nav-item"><span class="nick-name">昵称</span><span class="quit">退出</span></div></div><!-- 内容区域 --><div class="content"><!-- 筛选 --><div class="card"><div class="title"><span>内容管理</span></div><div class="body"><form class="sel-form"><div><label class="form-label">状态:</label><div class="form-check"><input class="form-check-input" type="radio" name="status" value="" id="all" checked><label class="form-check-label" for="all">全部</label></div><div class="form-check"><input class="form-check-input" type="radio" name="status" value="1" id="audit"><label class="form-check-label" for="audit">待审核</label></div><div class="form-check"><input class="form-check-input" type="radio" name="status" value="2" id="approved"><label class="form-check-label" for="approved">审核通过</label></div></div><div><label class="form-label">频道:</label><select class="form-select" name="channel_id"><option selected>请选择文章频道</option><option value="1">频道1</option><option value="2">频道2</option><option value="3">频道3</option></select></div><div><button type="button" class="btn btn-primary sel-btn">筛选</button></div></form></div></div><!-- 内容列表 --><div class="card"><table class="table table-striped table-hover"><thead><tr><th>封面</th><th>标题</th><th>状态</th><th>发布时间</th><th>阅读数</th><th>评论数</th><th>点赞数</th><th>操作</th></tr></thead><tbody class="align-middle art-list"><tr><td><imgsrc="https://img2.baidu.com/it/u=2640406343,1419332367&fm=253&fmt=auto&app=138&f=JPEG?w=708&h=500"alt=""></td><td>文章标题</td><td><span class="badge text-bg-success">审核通过</span><span class="badge text-bg-primary">待审核</span></td><td><span>2023-04-27 10:59:34</span></td><td><span>0</span></td><td><span>0</span></td><td><span>0</span></td><td><i class="bi bi-pencil-square edit"></i><i class="bi bi-trash3 del"></i></td></tr></tbody></table><!-- 分页 --><nav><ul class="pagination"><li class="page-item last"><a class="page-link" href="javascript:;"><span>&laquo;</span></a></li><li class="page-item page-now">第1页</li><li class="page-item next"><a class="page-link" href="javascript:;"><span>&raquo;</span></a></li><li><span class="total-count page-now">共0条</span></li></ul></nav></div></div></div></div><script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.4/axios.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.min.js"></script><script src="../../lib/form-serialize.js"></script><script src="../../utils/request.js"></script><script src="../../utils/auth.js"></script><script src="./index.js"></script>
</body></html>

  • 配置webpack.config.js多入口（多出口）和多页面的设置

入口：改用对象形式

js多出口：使用占位符占位

插件：

生成html

提取css

  • 重新打包 npm run dev

相关文章：

16 —— Webpack多页面打包

需求&#xff1a;把 黑马头条登陆页面-内容页面 一起引入打包使用 步骤&#xff1a; 准备源码&#xff08;html、css、js&#xff09;放入相应位置&#xff0c;并改用模块化语法导出 原始content.html代码 <!DOCTYPE html> <html lang"en"><head&…...

编程日记 2024/12/2 1:09:39

微服务即时通讯系统的实现（服务端）----（3）

目录 1. 消息存储子服务的实现1.1 功能设计1.2 模块划分1.3 模块功能示意图1.4 数据管理1.4.1 数据库消息管理1.4.2 ES文本消息管理 1.5 接口的实现1.5.1 消息存储子服务所用到的protobuf接口实现1.5.2 最近N条消息获取接口实现1.5.3 指定时间段消息搜索接口实现1.5.4 关键字消…...

编程日记 2024/12/2 1:08:38

.net6.0 mvc 传递 model 实体参数（无法对 null 引用执行运行时绑定）

说一下情况&#xff1a; 代码没问题&#xff0c;能成功从数据库里查到数据&#xff0c;能将数据丢给ViewBag.XXXX, 在View页面也能获取到 ViewBag.XXXX的值&#xff0c;但是发布到线上后报这个错&#xff1a; Microsoft.CSharp.RuntimeBinder.RuntimeBinderException: 无法对 …...

编程日记 2024/12/2 1:05:33

VUE 入门级教程：开启 Vue.js 编程之旅

一、Vue.js 简介 Vue.js 是一套构建用户界面的渐进式 JavaScript 框架。它专注于视图层的开发&#xff0c;能够轻松地与其他库或现有项目进行整合。Vue.js 的核心库只关注视图层&#xff0c;通过简洁的 API 实现数据绑定和 DOM 操作的响应式更新&#xff0c;让开发者可以高效地…...

编程日记 2024/12/2 1:02:30

Ubantu系统docker运行成功拉取失败【成功解决】

解决docker运行成功拉取失败 失败报错 skysky-Legion-Y7000-IRX9:~$ docker run hello-world docker: permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Head “http://%2Fvar%2Frun%2Fdocker.sock/_ping”: dial uni…...

编程日记 2024/12/2 1:01:29

mvn-mac操作小记

1.安装brew 如果报错&#xff0c;Warning: /opt/homebrew/bin is not in your PATH. vim ~/.zshrc&#xff0c;最后一行追加 export PATH“/opt/homebrew/bin:$PATH” source ~/.zshrc 2.安装brew install maven mvn -version查看路径 Maven home: /opt/homebrew/Cellar/mav…...

编程日记 2024/12/2 0:55:24

机器学习——生成对抗网络（GANs）：原理、进展与应用前景分析

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一. 生成对抗网络的基本原理二. 使用步骤2.1 对抗性训练2.2 损失函数 三. GAN的变种和进展四. 生成对抗网络的应用五. 持续挑战与未来发展方向六. 小结 前言 生…...

编程日记 2024/12/2 0:54:23

「Mac畅玩鸿蒙与硬件33」UI互动应用篇10 - 数字猜谜游戏

本篇将带你实现一个简单的数字猜谜游戏。用户输入一个数字&#xff0c;应用会判断是否接近目标数字&#xff0c;并提供提示“高一点”或“低一点”&#xff0c;直到用户猜中目标数字。这个小游戏结合状态管理和用户交互&#xff0c;是一个入门级的互动应用示例。 关键词 UI互…...

编程日记 2024/12/2 0:52:21

Ps：存储 Adobe PDF

在 Adobe Photoshop 中&#xff0c;将图像保存为 PDF 文件时&#xff0c; 会弹出“存储 Adobe PDF” Save Adobe PDF对话框。在此对话框中提供了多个选项&#xff0c;用于控制 PDF 文件的输出&#xff0c;包括一般设置&#xff08;选择预设、兼容性和保留编辑功能&#xff09;、…...

编程日记 2024/12/2 0:51:20

DDR3保姆级使用教程：ZYNQ 7010

内容:使用DDR3 IP核&#xff0c;向DDR3写入数据&#xff0c;然后再读出数据&#xff0c;通过串口打印。 设备&#xff1a;ZYNQ 7010 xc7z010clg-400-1。软件VIVADO 2018.3 &#xff08;1&#xff09;工程模块&#xff1a;一个写FIFO&#xff0c;一个读FIFO。一个ZYNQ IP核&am…...

编程日记 2024/12/2 0:48:17

OpenCV 模板匹配全解析：从单模板到多模板的实战指南

简介&#xff1a;本文深入探讨 OpenCV 中的模板匹配技术。详细介绍构建输入图像与模板图像的步骤&#xff0c;包括读取、截取、滤波与存储等操作。剖析 cv2.matchTemplate 语法及其参数含义&#xff0c;阐述不同匹配方法下结果值的意义。同时讲解 cv2.minMaxLoc 语法&#xff0…...

编程日记 2024/12/2 0:46:15

【JAVA] 杂谈： java中的拷贝（克隆方法）

这篇文章我们来介绍什么是拷贝&#xff0c;并且实现浅拷贝到深拷贝。 目录 一、浅拷贝 1.1 clone 方法 1.2 实现浅拷贝&#xff1a; 1.2.1 重写 clone方法 1.2.2 实现接口 Cloneable 1.2.3 调用克隆方法 1.2.4 原理图&#xff1a;​ 1.3 浅拷贝的不足 1.3.1 增加引用…...

编程日记 2024/12/2 0:45:14

使用 PDF API 合并 PDF 文件

内容来源&#xff1a; 如何在 Mac 上合并 PDF 文件 1. 注册与认证 您可以注册一个免费的 ComPDFKit API 帐户&#xff0c;该帐户允许您在 30 天内免费无限制地处理 1,000 多个文档。 ComPDFKit API 使用 JSON Web Tokens 方法进行安全身份验证。从控制面板获取您的公钥和密钥&…...

编程日记 2024/12/2 0:44:14

关于BeanUtils.copyProperties是否能正常复制字段【详细版】

话不多说&#xff01;先总结&#xff1a; 1、字段相同&#xff0c;类型不同&#xff08;不复制&#xff0c;也不报错&#xff09; 2、子类父类 (1)子类传给父类&#xff08;可以正常复制&#xff09; (2)父类传给子类&#xff08;可以正常复制&#xff09; 3、子类父类&#x…...

编程日记 2024/12/2 0:39:08

爬虫框架快速入门——Scrapy

适用人群&#xff1a;零基础、对网络爬虫有兴趣但不知道从何开始的小白。 什么是 Scrapy&#xff1f; Scrapy 是一个基于 Python 的网络爬虫框架&#xff0c;它能帮助你快速爬取网站上的数据&#xff0c;并将数据保存到文件或数据库中。 特点&#xff1a; 高效&#xff1a;支…...

编程日记 2024/12/2 0:37:05

鸿蒙开发-HMS Kit能力集(应用内支付、推送服务)

1 应用内支付 开发步骤 步骤一&#xff1a;判断当前登录的华为账号所在服务地是否支持应用内支付 在使用应用内支付之前&#xff0c;您的应用需要向IAP Kit发送queryEnvironmentStatus请求&#xff0c;以此判断用户当前登录的华为帐号所在的服务地是否在IAP Kit支持结算的国…...

编程日记 2024/12/2 0:36:03

TYUT设计模式大题

对比简单工厂&#xff0c;工厂方法&#xff0c;抽象工厂模式 比较安全组合模式和透明组合模式 安全组合模式容器节点有管理子部件的方法&#xff0c;而叶子节点没有&#xff0c;防止在用户在叶子节点上调用不适当的方法&#xff0c;保证了的安全性&#xff0c;防止叶子节点暴露…...

编程日记 2024/12/2 0:34:00

Webman中实现定时任务

文章目录 Webman中实现定时任务一、引言二、安装与配置1、安装Crontab组件2、创建进程文件3、配置进程文件随Webman启动4、重启Webman5、Cron表达式&#xff08;补充&#xff09;例子 三、使用示例四、总结 Webman中实现定时任务 一、引言 在现代的后端开发中&#xff0c;定时…...

编程日记 2024/12/2 0:28:55

《以 C++破局：人工智能系统可解释性的探索与实现》

在当今科技飞速发展的时代&#xff0c;人工智能已深度融入我们的生活&#xff0c;从医疗诊断到金融决策&#xff0c;从交通管控到司法审判&#xff0c;其影响力无处不在。然而&#xff0c;在这些涉及重大利益和社会影响的关键领域&#xff0c;人工智能系统却面临着严峻的信任危…...

编程日记 2024/12/2 0:27:55

C++：QTableWidget删除选中行(单行，多行即可)

转自博客&#xff1a; Qt C -在QTableWidget中删除行 - 腾讯云开发者社区 - 腾讯云 我的界面&#xff1a; 采集机器人位置和姿态信息并写入QTableWidget控件中 删除代码&#xff1a; 1.获取要删除行的索引 2.删除行 QList<QTableWidgetItem*> items ui->tableW…...

编程日记 2024/12/2 0:26:54

C++类中多线程的编码方式

问题 在C++代码中，一般的代码是需要封装在类里面，比如对象，方法等。否则就不能很好的利用C++面向对象的能力了。 但是这个方式在处理线程时会碰到一个问题。 考虑下面一个简单的场景： class demoC { public:std::thread t;int x;void threadFunc(){std::cout<<x&…...

编程日记 2024/12/2 0:21:49

数据湖的概念（包含数据中台、数据湖、数据仓库、数据集市的区别）--了解数据湖，这一篇就够了

文章目录 一、数据湖概念1、企业对数据的困扰2、什么是数据湖3、数据中台、数据湖、数据仓库、数据集市的区别 网上看了好多有关数据湖的帖子&#xff0c;还有数据中台、数据湖、数据仓库、数据集市的区别的帖子&#xff0c;发现帖子写的都很多&#xff0c;而且专业名词很多&am…...

编程日记 2024/12/2 0:19:46

EDKII之安全启动详细介绍

文章目录 安全启动简介安全启动流程介绍签名过程BIOS实现小结 安全启动简介 安全启动&#xff08;Secure Boot&#xff09;是一种计算机系统的安全功能&#xff0c;旨在确保系统启动过程中只能加载经过数字签名的受信任的操作系统和启动加载程序。通过使用安全启动&#xff0c…...

编程日记 2024/12/2 0:17:45

原生js上传图片

无样式上传图片 创建一个 FormData 对象&#xff1a;这个对象可以用于存储数据。 将文件添加到 FormData 对象&#xff1a;通过 append() 方法&#xff0c;将用户选择的文件添加到 formData 对象中。 使用 fetch 发送请求&#xff1a;使用 fetch API 或者其他方法将 FormDat…...

编程日记 2024/12/2 0:10:36

使用torch==2.5.1版本用的清华源遇到的坑

解决安装torch后,torch.cuda.is_available()结果为false的问题 清华源下载到的torch2.5.1版本的Lib\site-packages\torch\version.py 其中&#xff0c;清华源指的是&#xff1a; https://mirrors.tuna.tsinghua.edu.cn/anaconda/cloud/pytorchhttps://mirrors.tuna.tsinghua.…...

编程日记 2024/12/2 0:08:34

泷羽Sec-星河飞雪-BurpSuite之解码、日志、对比模块基础使用

免责声明 学习视频来自 B 站up主泷羽sec&#xff0c;如涉及侵权马上删除文章。 笔记的只是方便各位师傅学习知识&#xff0c;以下代码、网站只涉及学习内容&#xff0c;其他的都与本人无关&#xff0c;切莫逾越法律红线&#xff0c;否则后果自负。 泷羽sec官网&#xff1a;http…...

编程日记 2024/12/2 0:06:31

对拍详细使用方法

对拍的作用 对于我们在学校OJ&#xff0c;cf&#xff0c;牛客…各种只提供少量测试数据的题目&#xff0c;常常交上代码常常超时&#xff0c;能写出正确的暴力代码而题目要求的时间复杂度更低。然而这时你写出了能通过样例且时间复杂度更低的代码&#xff0c;但交上去就是错误…...

编程日记 2024/12/2 0:03:29

Python面向对象编程与模块化设计练习

需求&#xff1a; 编写一个BankAccount类&#xff0c;模拟银行账户功能&#xff1a; 属性&#xff1a;账户名、余额 方法&#xff1a;存款、取款、查询余额 使用模块将类和测试代码分离。 模块文件&#xff1a;bank_account.py 该模块包含 BankAccount 类。 class BankAccoun…...

编程日记 2024/12/2 0:01:27

Linux系统硬件老化测试脚本：自动化负载与监控

简介&#xff1a; 这篇文章介绍了一款用于Linux系统的自动化硬件老化测试脚本。该脚本能够通过对CPU、内存、硬盘和GPU进行高强度负载测试&#xff0c;持续运行设定的时长&#xff08;如1小时&#xff09;&#xff0c;以模拟长时间高负荷运行的环境&#xff0c;从而验证硬件的稳…...

编程日记 2024/12/2 0:00:26

搭建一个基于Web的文档管理系统，用于存储、共享和协作编辑文档

搭建一个基于Web的文档管理系统&#xff0c;用于存储、共享和协作编辑文档 本项目采用以下架构&#xff1a; NFS服务器: 负责存储文档资料。Web服务器: 负责提供文档访问和编辑功能。SELinux: 负责权限控制&#xff0c;确保文档安全。Git服务器: 负责存储文档版本历史&#x…...

编程日记 2024/12/1 23:53:17

网科创想网站管理/关键词搜索查找工具

上一篇我们学习了什么是顺序队列和基本实现方法&#xff0c;但是顺序队列自身存在一个很大的bug&#xff0c;就是当我们把一个元素入队时&#xff0c;队尾的指针会向前移动&#xff0c;当元素出队时&#xff0c;队头指针也会向前移动&#xff0c;这样就造成了元素都持续向一个方…...

编程日记 2025/1/12 0:11:30

做日本网站/百度论坛首页官网

查看物理内存信息 dmidecode | grep -A16 "Memory Device"| grep "Size"|sed s/^[\t]*// 查看硬盘信息 df -h 转载于:https://blog.51cto.com/yangtong/605780...

编程日记 2025/1/12 0:08:29

软件开发 网页设计网站/网站底部友情链接代码

容器是一个打包了应用和服务的环境&#xff0c;是一个轻量级的虚拟机&#xff0c;每一个容器都由一组特定的应用和必要的依赖库组成。 容器的管理操作 容器常见的命令&#xff1a;查看、创建、启动、终止和删除 创建容器 docker create docker run 二者的区别在于docker create…...

编程日记 2025/1/11 23:49:50

误给传销公司做网站算犯罪吗/营销策划培训

1.网络层使用的中间设备叫路由器,其传输单元是____。 (1) 分组&#xff1b;数据报&#xff1b;Packet&#xff1b;数据包 2.网络层向其上一层运输层可以提供的两种服务为____和虚电路。 (1) 数据报&#xff1b;数据报服务&#xff1b;无连接的数据报服务&#xff1b;无连接的数…...

编程日记 2025/1/11 23:31:59

做设计灵感的网站/网站友情链接怎么弄

第一步添加或修改/etc/yum.repos.d/的源文件 我选择手动创建 第二部 通过 wget http://mirrors.163.com/.help/CentOS-Base-163.repo 生成源文件 下一步把 CentOS-Base-163.repo中的内容 拷贝到 自己手动创建的 yum.源文件中 并且不用CentOS 源镜像 避免错误 用# 注释掉 一些…...

编程日记 2025/1/11 20:21:23

如何制作个人网站教程/网络公司网站建设

好的,我正在尝试从文本文件创建字典,因此键是单个小写字符,每个值都是文件中以该字母开头的单词的列表. 文本文件每行包含一个小写单词,例如&#xff1a; airport bathroom boss bottle elephant 输出&#xff1a; words {a: [airport], b: [bathroom, boss, bottle], e:[elep…...

编程日记 2025/1/11 19:40:31