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

webpack继续学习

article 2025/8/23 18:53:31

认识PostCSS工具

PostCSS是一个通过JS来转换样式的工具，这个工具可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀，css样式的重置

实现这些功能需要借助于PostCSS对应的插件

自动添加浏览器前缀需要：

npm install autoprefixer

单独的postcss配置文件

我们可以将这些配置信息放到一个单独的文件中进行管理

在根目录下创建postcss.config.js

module.exports = {plugins:[require("autoprefixer")],
}

postcss-preset-env

在配置postcss-loader的时候，我们配置插件并不需要使用autoprefixer，可以使用postcss-preset-env

preset是预设的意思

postcss-preset-env也是一个postcss的插件

它可以帮助我们将一些现代的css特性转成大多数浏览器认识的css，并且会根据目标浏览器或者运行时环境添加所需的polyfill

会自动帮助我们添加autoprefixer（相当于已经内置了autoprefixer）

首先安装postcss-preset-env

npm install postcss-preset-env -D

之后我们修改掉之前的autoprefixer

Webpack打包图片-JS-Vue

css浏览器前缀 在现代的前端开发模式中，不需要手动的添加浏览器前缀

加载图片案例准备

npm install file-loader

常见的使用图片的方式是两种：

img元素，设置src属性

其他元素，设置background-image的css属性

asset module type

在Webpack5之前，加载这些资源需要使用一些loader，比如说raw-loader、ul-loader、file-loader

在Webpack5开始，我们可以直接使用资源模块类型来替代上面的这些loader

资源模块类型

asset/resource发送一个单独的文件并导出URL（之前用file-loader实现）

asset/inline导出一个资源的data URL（之前用url-loader实现）

asset/source导出资源的源代码（之前用raw-loader实现）

asset在导出一个data URL和发送一个单独的文件之间自动选择（之前用url-loader并且配置资源体积限制实现）

const path = require('path');module.exports = {// 设置打包的模式mode: 'development',// 设置入口文件entry: './src/index.js',// 设置输出output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},// 配置模块规则module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader", "postcss-loader"]},{test: /\.less$/,use:[ "style-loader","css-loader","less-loader"]},{test:/\.(png|jpe?g|svg|gif)$/,type:"asset"}]}
};

更改配置文件成这个样子，然后：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Image Demo</title>
</head>
<body><script src="../dist/bundle.js"></script>
</body>
</html>
// 导入图片
import imgSrc from './img/sss.png';// 创建img元素
const imgEl = document.createElement('img');// 设置src属性
imgEl.src = imgSrc;// 将图片添加到body中
document.body.appendChild(imgEl);

打包后显示：

打包图片有不同的方式：

const path = require('path');module.exports = {// 设置打包的模式mode: 'development',// 设置入口文件entry: './src/component/cpns.js',// 设置输出output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},// 配置模块规则module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader", "postcss-loader"]},{test: /\.less$/,use:[ "style-loader","css-loader","less-loader"]},{test:/\.(png|jpe?g|svg|gif)$/,//打包两张图片，并且这两张图片有自己的地址，将地址设置到img/bgi中type:"asset/resource"//将图片进行base64的编码，并且直接编码后的源码放到打包的js文件中//type:"asset/inline"}]}
};

上面那种方式的缺点就是多图片加载要两次网络请求

下面这种方式也有缺点，缺点是造成js的文件非常大，下载js文件本身消耗时间非常长，下载和解析的执行时间都很长

所以我们要进行合理的规范

对于小一点的图片，可以进行base64编码

对于大一点的图片，单独的图片打包，形成url地址，单独的请求这个url图片

自定义文件输出路径和文件名

方式一：修改output，添加assetModuleFinename属性

方式二：在Rule中，添加一个generator属性，并且设置filename

有几个常用的placeholder：

ext（处理文件的扩展名）、name（处理文件的名称）、hash（文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值，32个十六进制）

url-loader的limit效果

在开发中我们往往是小的图片需要转换，但是大的图片可以直接使用图片

小的图片转换base64之后可以和页面一起请求，减少不必要的请求过程

大的图片也进行转换，反而会影响页面的请求速度

我们要两个步骤来实现

一：将type修改为asset

二：添加一个parser属性，制定dataUrl的条件，添加maxsize属性

const path = require('path');module.exports = {// 设置打包的模式mode: 'development',// 设置入口文件entry: './src/component/cpns.js',// 设置输出output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist'),// assetModuleFilename: 'abc.png'},// 配置模块规则module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader", "postcss-loader"]},{test: /\.less$/,use:[ "style-loader","css-loader","less-loader"]},{test:/\.(png|jpe?g|svg|gif)$/,type: 'asset/resource',//打包两张图片，并且这两张图,//将图片进行base64的编码，并且直接编码后的源码放到打包的js文件中//type:"asset/inline"parser:{dataUrlCondition:{maxSize: 60 * 1024}},generator:{//不写死，使用占位符//name:指向原来的图片名称//ext：扩展名//hash:webpack生成的hash值filename:"img/[name]_[hash:8][ext]"}}]}
};

这样进行打包，打包结束之后会在前面生成一个img文件夹

babel

开发中想要使用es6+的语法，想要使用typescript，开发React项目，都是离不开babel的

所以学习babel对于我们理解代码编写到线上的转变过程很重要

babel是一个工具链，主要用于旧浏览器或者环境中将ECMAScript2015+代码转换为向后兼容版本的JS，包括语法转换和源代码转换等

babel命令行的使用

babel本身可以作为一个独立的工具，不和webpack等构建工具配置来单独使用

如果我们希望在命令行尝试使用babel，需要安装下面的库：

@babel/core：babel的核心代码，必须安装

@babel/cli：可以让我们在命令行中使用babel

npm install @babel/cli @babel/core -D

使用babel来处理我们的源代码

src是源文件的目录

--out-dir指定要输出的文件夹dist

插件的使用

我们需要转换箭头函数，就可以使用箭头函数转换相关的插件

npm install @babel/plugin-transform-arrow-functions -D
npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions

查看转换后的结果我们会发现const没有转成var

plugin-transform-arrow-function并没有提供这样的功能

我们需要使用plugin-transform-block-scoping来完成这样的功能

npm install @babel/plugin-transform-block-scoping -D
npx babel src --out-dir --plugins=@babel/plugin-transform-block-scoping,@babel/plugin-transform-arrow-functions

当要转换的内容过多的时候，一个一个设置就比较麻烦了，可以用预设

安装@babel/preset-env预设

npm install @babel/preset-env -D
module.exports = {
plugins: ["babel/plugin-transform-arrow-functions","babel/plugin-transform-block-scoping",
],
presets:["@babel/preset-env"
]
}

在提供了preset之后，webpack就会根据我们的预设来加载对应的插件列表，并且将其川第一给babel

常见的预设有：

env

React

TypeScript

 

相关文章：

webpack继续学习

认识PostCSS工具 PostCSS是一个通过JS来转换样式的工具&#xff0c;这个工具可以帮助我们进行一些CSS的转换和适配&#xff0c;比如自动添加浏览器前缀&#xff0c;css样式的重置 实现这些功能需要借助于PostCSS对应的插件 自动添加浏览器前缀需要&#xff1a; npm install…...

编程日记 2025/8/22 6:44:25

Scrapy爬虫框架Spiders爬虫脚本使用技巧

我们都知道Scrapy是一个用于爬取网站数据、提取结构化数据的Python框架。在Scrapy中&#xff0c;Spiders是用户自定义的类&#xff0c;用于定义如何爬取某个&#xff08;或某些&#xff09;网站&#xff0c;包括如何执行爬取&#xff08;即跟踪链接&#xff09;以及如何从页面中…...

编程日记 2025/8/22 6:44:40

PowerBI企业运营分析—全动态盈亏平衡分析

PowerBI企业运营分析—全动态盈亏平衡分析 欢迎来到Powerbi小课堂&#xff0c;在竞争激烈的市场环境中&#xff0c;企业运营分析平台成为提升竞争力的核心工具。 该平台通过整合多源数据&#xff0c;实现关键指标的实时监控&#xff0c;从而迅速洞察业务动态&#xff0c;精准…...

编程日记 2025/8/22 6:44:28

docker的基本命令

容器的三大组成 镜像image 一个静态文件&#xff0c;特点&#xff1a;分层结构&#xff0c;不可更改 容器container 镜像运行的结果&#xff0c;容器可以修改&#xff0c;运行完后直接停止 仓库registry 用来存放镜像文件的地方 容器的常用命令介绍 关于镜像的命令 docker …...

编程日记 2025/8/22 6:44:36

【运维实战】Rsync将一台主Web服务器上的文件和目录同步到另一台备份服务器!

在管理 Web 服务器时&#xff0c;确保数据安全且在发生故障时能够快速恢复至关重要&#xff0c;备份和镜像 Web 服务器数据最可靠的方法之一是使用 rsync。 Rsync 工具可以帮助在两台服务器之间同步文件和目录&#xff0c;非常适合用于创建 Web 服务器数据的备份和镜像。 下面…...

编程日记 2025/8/22 6:44:45

实时通信RTC与传统直播的异同

实时通信&#xff08;RTC&#xff09;与直播虽然在音视频传输领域密切相关&#xff0c;但设计目标和实现原理是存在显著差异的。 一、核心联系 共同目标&#xff1a;均需实现音视频数据的采集、编码、传输与播放。技术重叠&#xff1a;使用相似的编码标准&#xff08;如H.264/…...

编程日记 2025/7/11 23:10:46

Python-正则表达式（re 模块）

目录 一、re 模块的使用过程二、正则表达式的字符匹配1. 匹配开头结尾2. 匹配单个字符3. 匹配多个字符4. 匹配分组5. Python 代码示例 三、re 模块的函数1. 函数一览表2. Python 代码示例1&#xff09;search 与 finditer2&#xff09;findall3&#xff09;sub4&#xff09;spl…...

编程日记 2025/7/5 11:49:50

AgenticSeek 本地部署教程（Windows 系统）

#工作记录 Fosowl/agenticSeek&#xff1a;完全本地的 Manus AI。 部署排错参考资料在文末 或查找往期笔记。 AgenticSeek 本地部署教程&#xff08;Windows 系统&#xff09; 一、环境准备 1. 安装必备工具 Docker Desktop 下载地址&#xff1a;Docker Desktop 官网 安装后启…...

编程日记 2025/8/23 10:06:35

基于 qiankun + vite + vue3 构建微前端应用实践

核心内容摘要​​ ​​技术栈组合​​ 采用 Vite Vue3 Qiankun 构建微前端架构主应用和子应用独立开发部署&#xff0c;通过 Qiankun 集成 ​​2. 主应用关键配置​​通过 registerMicroApps 注册子应用&#xff0c;配置路由匹配规则&#xff08;activeRule&#xff09;使用…...

编程日记 2025/8/22 6:44:52

VR教育：开启教育新时代的钥匙

VR 教育&#xff0c;即虚拟现实教育&#xff0c;是将虚拟现实技术(Virtual Reality&#xff0c;简称 VR)应用于教育领域的一种创新教育模式。它借助计算机技术、图形图像技术、传感器技术等&#xff0c;创建出高度逼真的虚拟学习环境&#xff0c;让学生通过头戴式显示设备、手柄…...

编程日记 2025/7/12 3:33:03

机器学习：逻辑回归与混淆矩阵

本文目录&#xff1a; 一、逻辑回归Logistic Regression二、混淆矩阵&#xff08;一&#xff09;精确率precision&#xff08;二&#xff09;召回率recall&#xff08;三&#xff09;F1-score&#xff1a;了解评估方向的综合预测能力&#xff08;四&#xff09;Roc曲线&#xf…...

编程日记 2025/8/22 6:44:56

20250602在荣品的PRO-RK3566开发板的Android13下打开HDMI显示

20250602在荣品的PRO-RK3566开发板的Android13下打开HDMI显示 2025/6/2 16:20 缘起&#xff1a;貌似荣品的PRO-RK3566开发板的Android13默认关闭了HDMI显示。 据说&#xff1a;荣品确认RK3566的GPU比较弱&#xff0c;同时开【MIPI接口的】LCD屏显示和HDMI显示容易出现异常。 更…...

编程日记 2025/8/22 6:45:01

【学习记录】快速上手 PyQt6：设置 Qt Designer、PyUIC 和 PyRCC 在 PyCharm中的应用

文章目录 &#x1f4cc; 前言✅ 第一步&#xff1a;安装 PyQt6 及其工具包&#x1f527; 第二步&#xff1a;找到相关工具路径&#x1f9f0; 第三步&#xff1a;在 PyCharm 中配置外部工具打开设置&#x1f6e0;️ 配置 Qt Designer&#x1f6e0;️ 配置 PyUIC6&#xff08;UI转…...

编程日记 2025/8/23 1:42:30

AI在网络安全领域的应用现状和实践

当前&#xff0c;人工智能技术已深度融入网络安全产品&#xff0c;推动传统防御模式向智能化、自适应方向加速演进。各安全厂商通过机器学习、深度学习与知识图谱等技术的融合应用&#xff0c;提高安全产品在威胁检测、攻击溯源、风险评估等场景的能力跃迁&#xff0c;突破传统…...

编程日记 2025/8/22 6:45:08

DrissionPage 异常处理实战指南：构建稳健的网页自动化防线

在网页自动化领域&#xff0c;异常处理能力直接决定了系统的健壮性。作为融合Selenium与Requests特性的创新工具&#xff0c;DrissionPage提供了多层次的异常处理机制。本文将深入剖析其异常体系&#xff0c;结合真实场景案例&#xff0c;为您构建一套完善的自动化容错方案。 …...

编程日记 2025/7/7 16:19:28

鸿蒙任务项设置案例实战

目录 案例效果 资源文件与初始化 string.json color.json CommonConstant 添加任务 首页组件 任务列表初始化 任务列表视图 任务编辑页 添加跳转 任务目标设置模型&#xff08;formatParams&#xff09; 编辑页面 详情页 任务编辑列表项 目标设置展示 引入目标…...

编程日记 2025/8/22 6:45:05

TDengine 的 AI 应用实战——运维异常检测

作者&#xff1a; derekchen Demo数据集准备 我们使用公开的 NAB数据集 里亚马逊 AWS 东海岸数据中心一次 API 网关故障中&#xff0c;某个服务器上的 CPU 使用率数据。数据的频率为 5min&#xff0c;单位为占用率。由于 API 网关的故障&#xff0c;会导致服务器上的相关应用…...

编程日记 2025/8/22 7:10:23

DHCP与DNS的配置

在网络管理中&#xff0c;DHCP&#xff08;动态主机配置协议&#xff09;和DNS&#xff08;域名系统&#xff09;是两个关键组件。DHCP用于自动分配IP地址&#xff0c;而DNS用于将域名解析为IP地址。本文将详细介绍如何在Linux环境下配置DHCP和DNS服务。 一、DHCP配置 1. 安装…...

编程日记 2025/7/8 20:49:57

使用Plop.js高效生成模板文件

前情 开发是个创造型的职业&#xff0c;也是枯燥的职业&#xff0c;因为开发绝大多数都是每天在业务的代码中无法自拨&#xff0c;说到开发工作&#xff0c;就永远都逃不开新建文件的步骤&#xff0c;特别现在组件化开发胜行&#xff0c;每天都是在新建新建组件的道路上一去不…...

编程日记 2025/8/21 19:15:36

Vue框架2(vue搭建方式2:利用脚手架,ElementUI)

一.引入vue第二种搭建方式 在以前的前端项目中,一个项目需要多个html文件实现页面之前的切换,如果页面中需要依赖js或者css文件,那么我们就需要在多个html文件中都需要导入vue.js文件,太过繁琐. 现在前端开发都采用单页面结果,一个项目中只有一个html文件 其他不同的内容都写…...

编程日记 2025/8/22 7:10:31

mac 设置cursor （像PyCharm一样展示效果）

一、注册 Cursor - The AI Code Editor 二、配置Python环境 我之前使用pycharm创建的python项目&#xff0c;以及创建了虚拟环境&#xff0c;现在要使用cursor继续开发。 2.1 选择Python 虚拟环境 PyCharm 通常将虚拟环境存储在项目目录下的 venv 或 .venv 文件夹中&#xf…...

编程日记 2025/8/22 7:10:35

SpringCloudAlibaba微服务架构

技术架构图 SpringCloudAlibaba微服务架构 说明&#xff1a; 1.1、采用SpringCloudAlibaba分布式微服务架构&#xff0c;使用Nginx做代理&#xff0c;服务治理使用Nacos组件&#xff0c;Gateway网关做权限验证、路由、过滤。 1.2、Redis做消息缓存&#xff0c;包括数据大屏、数…...

编程日记 2025/8/22 7:11:25

Java高级 | 【实验三】Springboot 静态资源访问

隶属文章&#xff1a; Java高级 | &#xff08;二十二&#xff09;Java常用类库-CSDN博客 系列文章&#xff1a; Java高级 | 【实验一】Spring Boot安装及测试 最新-CSDN博客 Java高级 | 【实验二】Springboot 控制器类相关注解知识-CSDN博客 目录 一、Thymeleaf 1.1 是什么&…...

编程日记 2025/8/23 9:33:55

C语言_预处理详解

1. 预定义符号 C语言设置了一些预定义符号&#xff0c;可以直接使用&#xff0c;预定义符号也是在预处理期间处理的 1 __FILE__ //进行编译的源文件 2 __LINE__//文件当前的行号 3 __DATE__ //文件被编译的日期 4 __TIME__//文件被编译的时间 5 __STDC__//如果编译器遵循ANSI…...

编程日记 2025/7/7 14:51:50

将前后端分离版的前端vue打包成EXE的完整解决方案

将若依前后端分离版的前端打包成EXE的完整解决方案 将若依前后端分离版的Vue前端打包成Windows可执行文件(.exe)，同时保持与后端API的通信，需要使用Electron框架来实现。下面是详细的步骤和解决方案。 一、准备工作 1. 环境要求 Node.js (推荐v16+)npm 或 yarn若依前后端分…...

编程日记 2025/7/7 10:20:52

物联网协议之MQTT（一）基础概念和设备

前言&#xff1a; 本文内容均以实战出发&#xff0c;像MQTT概念这种基础内容建议大家自行百度。 推荐资料&#xff1a; mica-mqtt文档 一、MQTT简单介绍 作为当今物联网的主流协议&#xff0c;MQTT的使用范围非常广&#xff0c;如果你想了解甚至是从事物联网行业&#xff0c;…...

编程日记 2025/7/7 15:55:11

「Java教案」Java程序的构成

课程目标 1&#xff0e;知识目标 能够按照Java标识符的命名规则&#xff0c;规范变量的命名。能够区分Java中的关键字与保留字。能够对注释进行分类&#xff0c;根据注释的用途合理的选择注释方式。 2&#xff0e;能力目标 能编写符合规范的标识符。能识别Java中的关键字和…...

编程日记 2025/8/22 6:34:43

还原Windows防火墙

还原Windows防火墙 1. 背景2. 为何“还原”完胜“关闭”？三大核心优势3. 还原防火墙默认值操作步骤4. 还原防火墙时，系统背后的工作​5. 需要还原防火墙场景一招拯救混乱网络！还原Windows防火墙，找回你的“安全速度”​1. 背景 你是否曾因一时误操作关闭了Windows防火墙？是…...

编程日记 2025/7/5 17:41:13

区块链可投会议CCF B--EDBT 2026 截止10.8 附录用率

Conference&#xff1a;EDBT: 29th International Conference on Extending Database Technology CCF level&#xff1a;CCF B Categories&#xff1a;数据库&#xff0f;数据挖掘&#xff0f;内容检索 Year&#xff1a;2026 Conference time&#xff1a;24th March - 27th…...

编程日记 2025/8/22 7:11:37

经典ReLU回归！重大缺陷「死亡ReLU问题」已被解决

来源 &#xff5c; 机器之心 在深度学习领域中&#xff0c;对激活函数的探讨已成为一个独立的研究方向。例如 GELU、SELU 和 SiLU 等函数凭借其平滑梯度与卓越的收敛特性&#xff0c;已成为热门选择。 尽管这一趋势盛行&#xff0c;经典 ReLU 函数仍因其简洁性、固有稀疏性及…...

编程日记 2025/8/22 7:11:45