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

16 —— Webpack多页面打包

news 2025/10/26 14:41:55

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

步骤：

准备源码（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多页面打包

需求：把黑马头条登陆页面-内容页面一起引入打包使用步骤： 准备源码（html、css、js）放入相应位置，并改用模块化语法导出原始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 引用执行运行时绑定）

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

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

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

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

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

解决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 如果报错，Warning: /opt/homebrew/bin is not in your PATH. vim ~/.zshrc，最后一行追加 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）：原理、进展与应用前景分析

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

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

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

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

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

Ps：存储 Adobe PDF

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

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

DDR3保姆级使用教程：ZYNQ 7010

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

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

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

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

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

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

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

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

使用 PDF API 合并 PDF 文件

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

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

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

话不多说！先总结： 1、字段相同，类型不同（不复制，也不报错） 2、子类父类 (1)子类传给父类（可以正常复制） (2)父类传给子类（可以正常复制） 3、子类父类&#x…...

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

爬虫框架快速入门——Scrapy

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

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

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

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

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

TYUT设计模式大题

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

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

Webman中实现定时任务

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

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

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

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

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

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

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

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

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中，手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力，既支持点击、长按、拖拽等基础单一手势的精细控制，也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/9/19 4:31:58

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂（如抗体、抑制肽）在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上，高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术，但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2025/10/14 17:58:13

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

编程新知 2025/10/21 13:03:10

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

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

编程新知 2025/10/26 5:13:25