webpack5零基础入门-11处理html资源
1.目的
主要是为了自动引入打包后的js与css资源，避免手动引入
2.安装相关包
npm install --save-dev html-webpack-plugin3.引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');4.添加插件（通过new方法调用）
/**插件 */plugins: [//plugin配置new ESLintPlugin({/** 检测哪些文件 */context: path.resolve(__dirname, 'src')}),new HtmlWebpackPlugin()],进行打包可以看到打包后的文件夹中多了html文件
并且自动引入了dist.js
5.配置插件（是打包后的html文件有一个指定的模版）
new HtmlWebpackPlugin({/**模板 */template: path.resolve(__dirname, 'src/public/index.html')})可以看到打包后的html文件既保留了模版的结构又自动引入了js文件
<!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"><title>webpack</title>
<script defer src="static/js/dist.js"></script></head>
<body><h1>hell webpack</h1><!-- <div class="red"></div><div class="box"></div><div class="box2"></div><div class="box3"></div> --><span class="iconfont icon-tianjia"></span><!-- --><!-- <script src="../../dist/static/js/dist.js"></script> -->
</body>
</html>相关文章：
webpack5零基础入门-11处理html资源
1.目的 主要是为了自动引入打包后的js与css资源，避免手动引入 2.安装相关包 npm install --save-dev html-webpack-plugin 3.引入插件 const HtmlWebpackPlugin require(html-webpack-plugin); 4.添加插件（通过new方法调用） /**插件 *…...
el-input设置max、min无效的解决方案
目录 一、方式1：type“number” 二、方式2：oninput（推荐） 三、计算属性 如下表所示，下面为官方关于max，min的介绍： el-input： max原生属性，设置最大值min原生属性&a…...
C语言经典面试题目（十八）
1、如何在C语言中实现堆排序算法？ 堆排序是一种利用堆数据结构进行排序的算法。它的基本思想是首先将待排序的数组构建成一个最大堆（或最小堆），然后逐步将堆顶元素与堆中最后一个元素交换，并重新调整堆，使…...
[数据集][目标检测]零售柜零食检测数据集VOC+YOLO格式5422张113类
数据集格式：Pascal VOC格式YOLO格式(不包含分割路径的txt文件，仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)：5422 标注数量(xml文件个数)：5422 标注数量(txt文件个数)：5422 标注…...
Flask vs. Django：选择适合你的Web开发框架【第134篇—Flask vs. Django】
👽发现宝藏 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 Flask vs. Django：选择适合你的Web开发框架 在选择一个适合你项目的Web开发框架…...
你能解释一下Spring AOP（面向切面编程）的概念和用法吗？在Spring中，如何使用事务管理？
你能解释一下Spring AOP（面向切面编程）的概念和用法吗？ Spring AOP（面向切面编程）是Spring框架中一个非常重要的功能模块，它允许开发者通过预编译方式和运行期动态代理来实现程序功能的统一维护。AOP并不是…...
时序分解 | Matlab实现GWO-CEEMDAN基于灰狼算法优化CEEMDAN时间序列信号分解
时序分解 | Matlab实现GWO-CEEMDAN基于灰狼算法优化CEEMDAN时间序列信号分解 目录 时序分解 | Matlab实现GWO-CEEMDAN基于灰狼算法优化CEEMDAN时间序列信号分解效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.CEEMDAN方法的分解效果取决于白噪声幅值权重(Nstd)和噪声添…...
：利用Jasypt对数据库连接进行加密)
Spring Boot(七十)：利用Jasypt对数据库连接进行加密
1 Jasypt简介 Jasypt（Java Simplified Encryption）是一个专注于简化Java加密操作的工具。它提供了一种简单而强大的方式来处理数据的加密和解密，使开发者能够轻松地保护应用程序中的敏感信息，如数据库密码、API密钥等。 Jasypt的设计理念是简化加密操作，使其对开发者更加…...
Mysql设计规范
主键推荐默认用递增字符串大小合理设置数据库默认字段: 主键、创建人、创建时间、修改人、修改时间、逻辑删除（可选）、乐观锁（可选）冗余字段： 严禁冗余变更字段；例如： 创建人名称，租…...
Vue3项目部署安装
Vue3ts部署 查看官网安装项目vue3的命令（四个）其中有： yarn create vuelatest 我执行时遇到报错，可能是我yarn版本不是最新 的问题， 改用这个命令去掉latest即可 yarn create vue 新项目先要安装yarn依赖,才能yarn …...
Oracle P6 Professional 配置连接数据库总结
前言 P6 Professional作为Oracle P6计划管理系统的重要套件之一，其操作出色，体检佳，是非常多的计划工程师跟踪项目进度计划的辅助工具。自20年前，Professional一直在不断的演变更新，以适应当前的新技术，从…...
WPF —— Grid网格布局
1 ：Grid网格布局简介 Grid为WPF中最常用的布局容器, 作为View中的主要组成部分, 负责框架中整体的页面布局。 2：网格标签Grid.ColumnDef Grid.ColumnDefinitions自定义列 只能设置宽度 不能设置高度ColumnDefinition 每一个列可以设置宽度，…...
爬虫的去重
去重基本原理 爬虫中什么业务需要使用去重 防止发出重复的请求防止存储重复的数据 在爬取网页数据时，避免对同一URL发起重复的请求，这样可以减少不必要的网络流量和服务器压力，提高爬虫的效率，在将爬取到的数据存储到数据库或其…...
elementUI两个select单选框联动
实现需求：两个单选框内容两栋，在选择第一个时，第二个选框能自动更新对应选项。且在切换第一个选项内容时，第二个选框会被清空且切换到新的对应选项。 设置值班班次和备班情况两个选项 ，完整代码如下： <…...
十四、GPT
在GPT-1之前，传统的 NLP 模型往往使用大量的数据对有监督的模型进行任务相关的模型训练，但是这种有监督学习的任务存在两个缺点：预训练语言模型之GPT 需要大量的标注数据，高质量的标注数据往往很难获得，因为在很多任务…...
五款优秀的FTP工具
一、WinSCP WinSCP是一个Windows环境下使用SSH的开源图形化SFTP客户端。同时支持SCP协议。它的主要功能就是在本地与远程计算机间安全的复制文件。.winscp也可以链接其他系统,比如linux系统。 官网：https://winscp.net/ 二、FileZilla FileZilla是一个免费开源的…...
十八、软考-系统架构设计师笔记-真题解析-2022年真题
软考-系统架构设计师-2022年上午选择题真题 考试时间 8:30 ~ 11:00 150分钟 1.云计算服务体系结构如下图所示，图中①、②、③分别与SaaS、PaaS、IaaS相对应，图中①、②、③应为( )。 A.应用层、基础设施层、平台层 B.应用层、平台层、基础设施层 C.平…...
oracle数据库名、实例名、服务名等区分
DB_NAME： ①是数据库名，长度不能超过8个字符，记录在datafile、redolog和control file中 ②在DataGuard环境中DB_NAME相同而DB_UNIQUE_NAME不同 ③在RAC环境中，各个节点的DB_NAME 都相同，但是INSTANCE_NAME不同 ④DB_NA…...
MQ横向对比：RocketMQ、Kafka、RabbitMQ、ActiveMQ、ZeroMQ
前言 本文将从多个角度全方位对比目前比较常用的几个MQ： RocketMQKafkaRabbitMQActiveMQZeroMQ将单独说明。 表格对比 特性RocketMQKafkaRabbitMQActiveMQ单机吞吐量10 万级，支撑高吞吐10 几万级，吞吐量非常高，甚至有文献称&a…...
html5cssjs代码 018颜色表
html5&css&js代码 018颜色表 一、代码二、效果三、解释 这段代码展示了一个基本的颜色表，方便参考使用，同时也应用了各种样式应用方式。 一、代码 <!DOCTYPE html> <html lang"zh-cn"> <head><title>编程笔记…...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中，每个页面需要使用ref，onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入，需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...
CMake基础：构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）
目录 1.TCP的连接管理机制（1）三次握手①握手过程②对握手过程的理解 （2）四次挥手（3）握手和挥手的触发（4）状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
聊聊 Pulsar：Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台，以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中，Producer（生产者） 是连接客户端应用与消息队列的第一步。生产者…...
【2025年】解决Burpsuite抓不到https包的问题
环境：windows11 burpsuite:2025.5 在抓取https网站时，burpsuite抓取不到https数据包，只显示： 解决该问题只需如下三个步骤： 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...
Mac软件卸载指南，简单易懂！
刚和Adobe分手，它却总在Library里给你写"回忆录"？卸载的Final Cut Pro像电子幽灵般阴魂不散？总是会有残留文件，别慌！这份Mac软件卸载指南，将用最硬核的方式教你"数字分手术"࿰…...
WordPress插件：AI多语言写作与智能配图、免费AI模型、SEO文章生成
厌倦手动写WordPress文章？AI自动生成，效率提升10倍！ 支持多语言、自动配图、定时发布，让内容创作更轻松！ AI内容生成 → 不想每天写文章？AI一键生成高质量内容！多语言支持 → 跨境电商必备&am…...
SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理）
上一章用到了V2 的概念，其实 Fiori当中还有 V4，咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)，代理中间件（ui5-middleware-simpleproxy）-CSDN博客…...
与常用工具深度洞察App瓶颈)
iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈
在日常iOS开发过程中，性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期，开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发，但背后往往隐藏着系统资源调度不当…...
无人机侦测与反制技术的进展与应用
国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机（无人驾驶飞行器，UAV）技术的快速发展，其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统，无人机的“黑飞”&…...