Webpack5入门到原理12：处理 Html 资源
1. 下载包
npm i html-webpack-plugin -D2. 配置
webpack.config.js
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {entry: "./src/main.js",output: {path: path.resolve(__dirname, "dist"),filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中clean: true, // 自动将上次打包目录资源清空},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: ["style-loader", "css-loader"],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],},{test: /\.s[ac]ss$/,use: ["style-loader", "css-loader", "sass-loader"],},{test: /\.styl$/,use: ["style-loader", "css-loader", "stylus-loader"],},{test: /\.(png|jpe?g|gif|webp)$/,type: "asset",parser: {dataUrlCondition: {maxSize: 10 * 1024, // 小于10kb的图片会被base64处理},},generator: {// 将图片文件输出到 static/imgs 目录中// 将图片文件命名 [hash:8][ext][query]// [hash:8]: hash值取8位// [ext]: 使用之前的文件扩展名// [query]: 添加之前的query参数filename: "static/imgs/[hash:8][ext][query]",},},{test: /\.(ttf|woff2?)$/,type: "asset/resource",generator: {filename: "static/media/[hash:8][ext][query]",},},{test: /\.js$/,exclude: /node_modules/, // 排除node_modules代码不编译loader: "babel-loader",},],},plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, "src"),}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, "public/index.html"),}),],mode: "development",
};3. 修改 index.html
去掉引入的 js 文件，因为 HtmlWebpackPlugin 会自动引入
<!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>webpack5</title></head><body><h1>Hello Webpack5</h1><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div><i class="iconfont icon-arrow-down"></i><i class="iconfont icon-ashbin"></i><i class="iconfont icon-browse"></i></body>
</html>4. 运行指令
npx webpack此时 dist 目录就会输出一个 index.html 文件
相关文章：
Webpack5入门到原理12：处理 Html 资源
1. 下载包 npm i html-webpack-plugin -D 2. 配置 webpack.config.js const path require("path"); const ESLintWebpackPlugin require("eslint-webpack-plugin"); const HtmlWebpackPlugin require("html-webpack-plugin");module.expo…...
Vue3-Axios二次封装与Api接口统一管理
一、安装axios npm i axios 二、创建utils工具文件夹 创建request.ts文件 import axios from axios //引入element-plus消息提示 import { ElMessage } from element-plus //引入用户相关的仓库 import useUserStore from /store/modules/user //使用axios对象create方法,创建…...
RHCE: 主从DNS服务器配置 （实现正反向解析）
主服务器配置: 准备工作: #关闭防火墙 [root192 ~]# systemctl stop firewalld#关闭selinux [root192 ~]# setenforce 0#查看selinux状态 [root192 ~]# getenforce Permissive#安装bind包 [root192 ~]# yum install bind -y#查询软件包下的文件 /etc/named.conf #主配置文…...
Git学习笔记（第6章）：GitHub操作（远程库操作）
目录 6.1 远程库操作 6.1.1 创建远程库 6.1.2 命名远程库 6.1.3 本地库推送到远程库(push) 6.1.4 远程库拉取到本地库(pull) 6.1.5 远程库克隆到本地库(clone) 6.2 团队内协作 6.3 跨团队协作 6.4 SSH免密登录 6.1 远程库操作 命令 作用 git remote -v 查看所有远程…...
)
【主题广范|见刊快】2024年海洋工程与测绘遥感国际学术会议(ICOESRS 2024)
【主题广范|见刊快】2024年海洋工程与测绘遥感国际学术会议(ICOESRS 2024) 2024 International Conference Ocean Engineering and Surveying Remote Sensing(ICOESRS 2024) 一、【会议简介】 随着人类对海洋的认识和开发不断深入，海洋工程和测绘遥感技术的研究和应…...
解决el-radio-group只触发一次的问题
1.需求是点击合并后，出来二次确认框。现在的问题是点击完出现二次确认框后，再次点击不出来二次确认框了 2.一开始代码是这样写的 <el-radio-group v-model"unfold" size"mini" changechangeMerge><el-radio-button :labe…...
openssl3.2 - 官方demo学习 - pkey - EVP_PKEY_RSA_keygen.c
文章目录 openssl3.2 - 官方demo学习 - pkey - EVP_PKEY_RSA_keygen.c概述笔记END openssl3.2 - 官方demo学习 - pkey - EVP_PKEY_RSA_keygen.c 概述 官方指出 : RSA key 如果小于2048位, 就属于弱key 官方demo中, 给出的默认key长度为4096位 从名字生成上下文 初始化上下文…...
密码搜|Facebook 8组问答，搞定Pixel与广告之间的关系！
Q1：Pixel（像素/代码）是什么？ A：Pixel有多种称呼：Pixel、像素、代码。它只是一种分析工具，可帮助广告主了解用户在网站上采取的操作，继而衡量广告成效。 设置Facebook Pixel像素代码…...
Apache StringUtils：Java字符串处理工具类
简介 在我们的代码中经常需要对字符串判空，截取字符串、转换大小写、分隔字符串、比较字符串、去掉多余空格、拼接字符串、使用正则表达式等等。如果只用 String 类提供的那些方法，我们需要手写大量的额外代码，不然容易出现各种异常。现在有…...
设计模式 代理模式(静态代理 动态代理) 与 Spring Aop源码分析 具体是如何创建Aop代理的
代理模式 代理模式是一种结构型设计模式，它通过创建一个代理对象来控制对真实对象的访问。这种模式可以用于提供额外的功能操作，或者扩展目标对象的功能。 在代理模式中，代理对象与真实对象实现相同的接口，以便在任何地方都可以使…...
【EI会议征稿通知】第七届先进电子材料、计算机与软件工程国际学术会议(AEMCSE 2024）
第七届先进电子材料、计算机与软件工程国际学术会议(AEMCSE 2024） 2024 7th International Conference on Advanced Electronic Materials, Computers and Software Engineering 第七届先进电子材料、计算机与软件工程国际学术会议(AEMCSE 2024)将于2024年5月10-1…...
Verilog基础：强度建模（一）
相关阅读 Verilog基础https://blog.csdn.net/weixin_45791458/category_12263729.html?spm1001.2014.3001.5482 一、强度建模基础 Verilog HDL提供了针对线网信号0、1、x、z的精准强度建模方式，这样可以允许将两个线网信号进行线与操作从而更加精确地描述出硬件行…...
Spring Boot各类变量的使用
文章目录 1. 变量类型2. 获取变量2.1 获取方式2.2 获取方法2.2.1 通过Value注入获取变量值2.2.2 System.genenv 获取变量值2.2.3 System.getProperty 获取变量值2.2.4 Environment 获取变量值2.2.5 ConfigurationProperties 获取变量值2.2.6 SpringApplication.run 程序启动参数…...
Hive管理UDF详解
大数据集群下，共有三种管理Hive UDF的方式，如下： 名称重启Hive服务Jar保存目录场景直接JAR配置需要HDFS开发辅助JARs目录配置需要本地目录防止意外覆盖文件可重载辅助JAR配置不需要本地目录频繁更新UDF场景{HIVE_HOME}/auxlib目录需要本地目录不建议{HIVE_HOME}/lib目录需要…...
bug笔记：解决 HTTP Error 500.30 - ASP.NET Core app failed to start
总结下后端部署windos iis环境net6版本，500.30问题报错的一种解决方案： 一、问题描述 二、解决方案 检查下是否安装了net6对应的环境，是否已经安装 然后在事件管理器>Windows日志>应用程序，里面查看详细异常记录 在iis下面…...
理解pytorch系列：transpose是怎么实现的
在PyTorch中，transpose()是一种操作，它交换张量中两个指定维度的位置。实现这一点的关键在于不实际移动数据，而是通过改变张量的元数据（包括步长（stride）和尺寸（size））来…...
Linux tftp命令教程：文件传输利器（附案例详解和注意事项）
Linux tftp命令介绍 tftp，全称为Trivial File Transfer Protocol（简单文件传输协议）。tftp是一个用于文件传输的客户端命令，用于从远程主机传输文件，包括一些非常简洁、通常嵌入的系统。 Linux tftp命令适用的Linux版…...
beego的模块篇 - task任务
利用该工具来定时的做一些任务，但是有些时候我们的进程内也希望定时的来处理一些事情，可以使用crontab。 1 任务计划 1.1 初始化一个任务 tk1 : task.NewTask("tk1", "0 12 * * * *", func(ctx context.Context) error { fmt.Pri…...
ThreadLocal工具类
ThreadLocal工具类 ThreadLocalUtil.java public class ThreadLocalUtil {static final ThreadLocal THREAD_LOCAL new ThreadLocal();public static <T> T get() {return (T) THREAD_LOCAL.get();}public static void set(Object value) {THREAD_LOCAL.set(value);}p…...
【c语言】扫雷（上）
先开一个test.c文件用来游戏的逻辑测试，在分别开一个game.c文件和game.h头文件用来实现游戏的逻辑 主要步骤： 游戏规则： 输入1（0）开始（结束）游戏，输入一个坐标，如果该坐…...
SQL出现filesort 一定慢吗
前言：filesort 出现在当无法使用索引排序时，MySQL 必须自己计算排序顺序，这个过程称为 filesort。EXPLAIN 的 Extra 字段会出现 Using filesort。常见触发场景：排序列不在索引中，或顺序/方向与索引不一致ORDER BY 包含…...
linux的逻辑卷管理（Logical Volume Manager）
在对磁盘进行分区大小规划时，有时往往不能确定这个分区要使用的总空间大小。而用fdisk对磁盘进行分区后，每个分区的大小就已经固定了，如果分区设置的过大，会白白浪费磁盘空间；分区设置的过小，就会导致空间不…...
从云台控制理解双环PID：手把手调试大疆GM6020电机的角度与速度环
从云台控制理解双环PID：手把手调试大疆GM6020电机的角度与速度环 在机器人控制领域，精准的位置控制是实现高性能运动的基础。无论是工业机械臂的重复定位，还是竞技机器人云台的快速响应，都离不开对电机运动的精确控制。而在这其中…...
终极LDDC歌词工具指南：如何快速获取完美同步的逐字歌词
终极LDDC歌词工具指南：如何快速获取完美同步的逐字歌词 【免费下载链接】LDDC 简单易用的精准歌词(逐字歌词/卡拉OK歌词)下载匹配工具|A simple and user-friendly tool for downloading and matching precise lyrics (word-by-word lyrics/Karaoke lyrics) 项目地…...
终极Emu模型架构解析：深入理解370亿参数的多模态Transformer
终极Emu模型架构解析：深入理解370亿参数的多模态Transformer 【免费下载链接】Emu Emu Series: Generative Multimodal Models from BAAI 项目地址: https://gitcode.com/gh_mirrors/emu/Emu Emu是由BAAI开发的革命性多模态生成模型系列，通过融合…...
RUST编程学习.2语法
目录 前言 一、思维导图 二、Rust语法专属 1.迭代器 2.生命周期 总结 前言 在进行编译器下载后，就可以写代码进行编译调试了，在这之前就是要学习rust语法，在学习的过程中我整理了一版思维导图，最直观的感觉就是rust的语法很…...
探索C/C++程序从源码到可执行文件的编译之旅
计算机程序设计语言可大致分为机器语言、汇编语言和高级语言三类。高级语言需经翻译成机器语言后方可执行，此翻译过程包括编译和解释两种方式。因此，高级语言可进一步细分为编译型语言和解释型语言。编译型语言如C、C、Java，其程序需经过预处…...
Quark：极致微型Linux卡片电脑的硬件设计、系统开发与应用实战
1. 项目概述：当“小”成为核心竞争力在嵌入式开发和创客圈子里，我们总在寻找那个“刚刚好”的硬件平台。它要足够小巧，能塞进任何灵光一现的创意里；它要足够完整，能运行一个正经的操作系统来处理复杂逻辑；它…...
AI Agent与RPA的融合：智能自动化新范式
AI Agent与RPA的融合：智能自动化新范式 关键词：AI Agent、RPA、智能自动化、融合技术、自主决策、业务流程优化、人机协作 摘要：本文深入探讨了AI Agent与RPA（机器人流程自动化）的融合，揭示了这一技术组合如何开创智能自动化的新范式。我们将通过生动的类比和详细的技术解…...
RAG架构全解析：从基础到高级，打造你的企业级知识库问答系统！
本文详细介绍了RAG（Retrieval-Augmented Generation）架构的多种变体，从基础的Naive RAG和Standard RAG开始，逐步深入到Advanced RAG、Hybrid Search RAG、Rerank型RAG、文档增强型RAG、Agentic RAG、Router RAG、GraphRAG、RAPTOR…...