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

怎么做应援网站/seo排名教程

news 文章来源：https://blog.csdn.net/weixin_53961451/article/details/143695183 2025/3/5 0:19:01
怎么做应援网站,seo排名教程,郑州网站公司排名,建筑工程网络计划电子版webpack 的核心功能是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。更多复杂的功能需要借助 webpack loaders 和 plugins 来完成。 1. 什么是 Loader Loader 本质上是一个函数，它的作用是将某个源码字符串转换成…

webpack 的核心功能是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。更多复杂的功能需要借助 webpack loaders 和 plugins 来完成。

1. 什么是 Loader

Loader 本质上是一个函数，它的作用是将某个源码字符串转换成另一个源码字符串返回。Loader 在模块解析的过程中被调用，以得到最终的源码。
在这里插入图片描述

2. Loader 的工作流程

全流程

  1. 初始化：webpack 读取配置文件，解析入口模块。
  2. 编译：
    • 创建 chunk：根据入口模块创建 chunk。
    • 解析模块：解析每个模块的依赖关系。
    • 应用 loader：根据配置的 loader 对模块进行转换。
  3. 输出：将编译后的资源输出到指定的文件中。
    在这里插入图片描述

Chunk 中解析模块的流程

在这里插入图片描述

  1. 读取模块内容：读取模块的源代码。
  2. 解析依赖：解析模块中的依赖关系。
  3. 生成 AST：生成抽象语法树（AST）。
  4. 生成模块代码：根据 AST 生成最终的模块代码。
更详细的流程

在这里插入图片描述

  1. 读取模块内容：读取模块的源代码。
  2. 解析依赖：解析模块中的依赖关系。
  3. 应用 loader：
    • 从右到左：多个 loader 会从右到左依次执行。
    • 链式调用：每个 loader 的输出作为下一个 loader 的输入。
  4. 生成 AST：生成抽象语法树（AST）。
  5. 生成模块代码：根据 AST 生成最终的模块代码。

处理 loaders 的流程

在这里插入图片描述

  1. 当前模块是否满足某个规则？

    • 如果当前模块满足某个规则，则继续下一步。
    • 如果不满足，则跳过所有 loader，直接进入下一个模块。

  2. 读取规则中对应的 loaders

    • 根据当前模块所满足的规则，找到相应的 loader 列表。

  3. 加载 loaders 数组

    • 将找到的所有 loader 放入一个数组中。

  4. 处理 loader 流程

    • 从右到左依次执行每个 loader。
      • 第一个 loader 接收原始代码作为输入。
      • 每个 loader 执行完后，将其结果作为下一个 loader 的输入。
      • 最终的结果就是经过所有 loader 处理后的源码。

    总的来说，当一个模块满足特定规则时，webpack 会按照配置好的顺序，从右到左依次应用每个 loader，直到获得最终的源码。如果模块不满足任何规则，则不会应用任何 loader。这种机制允许开发者灵活地定义不同类型的文件应该如何被处理。

3. Loader 配置

完整配置

module.exports = {module: { // 针对模块的配置，目前版本只有两个配置，rules、noParserules: [ // 模块匹配规则，可以存在多个规则{ // 每个规则是一个对象test: /\.js$/, // 匹配的模块正则use: [ // 匹配到后应用的规则模块{  // 其中一个规则loader: "模块路径", // loader 模块的路径，该字符串会被放置到 require 中options: { // 向对应 loader 传递的额外参数// 配置选项}}]}]}
};

简化配置

module.exports = {module: { // 针对模块的配置，目前版本只有两个配置，rules、noParserules: [ // 模块匹配规则，可以存在多个规则{ // 每个规则是一个对象test: /\.js$/, // 匹配的模块正则use: ["模块路径1", "模块路径2"] // loader 模块的路径，该字符串会被放置到 require 中}]}
};

4. 常见的 Loader

  • babel-loader：将 ES6+ 代码转换为 ES5 代码。
  • css-loader：解析 CSS 文件中的 @import 和 url() 语句。
  • style-loader：将 CSS 插入到 DOM 中。
  • file-loader：将文件输出到指定目录，并返回文件的 URL。
  • url-loader：类似于 file-loader，但可以将小文件转为 Data URL。
  • less-loader：将 Less 文件编译为 CSS。
  • sass-loader：将 Sass/SCSS 文件编译为 CSS。
  • ts-loader：将 TypeScript 文件编译为 JavaScript。

5. 示例

假设我们有一个项目，需要使用 babel-loader 来转换 ES6 代码，使用 css-loader 和 style-loader 来处理 CSS 文件。

项目结构
my-project/
├── src/
│   ├── index.js
│   ├── styles.css
├── dist/
├── package.json
└── webpack.config.js
webpack.config.js
const path = require('path');module.exports = {mode: 'development', // 或 'production'entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']}}},{test: /\.css$/,use: ['style-loader', 'css-loader']}]}
};
安装依赖
npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env css-loader style-loader
运行构建

在 package.json 中添加一个 build 脚本：

{"scripts": {"build": "webpack"}
}

然后运行：

npm run build

构建完成后，dist 目录下会生成 bundle.js 文件，你可以在 HTML 文件中引入这个文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>My Webpack Project</title>
</head>
<body><script src="dist/bundle.js"></script>
</body>
</html>

总结

通过本课程，你已经了解了 webpack 中 loader 的概念、工作流程以及如何配置 loader。合理使用 loader 可以帮助你处理各种类型的文件，提高项目的可维护性和灵活性。

相关文章：

webpack loader全解析，从入门到精通（10）

webpack 的核心功能是分析出各种模块的依赖关系&#xff0c;然后形成资源列表&#xff0c;最终打包生成到指定的文件中。更多复杂的功能需要借助 webpack loaders 和 plugins 来完成。 1. 什么是 Loader Loader 本质上是一个函数&#xff0c;它的作用是将某个源码字符串转换成…...

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

python机器人Agent编程——实现一个本地大模型和爬虫结合的手机号归属地天气查询Agent

目录 一、前言二、准备工作三、Agent结构四、python模块实现4.1 实现手机号归属地查询工具4.2实现天气查询工具4.3定义创建Agent主体4.4创建聊天界面 五、小结PS.扩展阅读ps1.六自由度机器人相关文章资源ps2.四轴机器相关文章资源ps3.移动小车相关文章资源ps3.wifi小车控制相关…...

编程日记 2024/11/12 0:33:07

【动态规划】斐波那契数列模型总结

一、第 N 个泰波那契数 题目链接&#xff1a; 第 N 个泰波那契数 题目描述&#xff1a; 题目分析&#xff1a; 1、状态表示&#xff1a; dp[i] 表示&#xff1a;第 i 个斐波那契数的值 2、状态转移方程&#xff1a; 由题意可知第 i 个数等于其前三个数之和 dp[i] dp[i-…...

编程日记 2024/11/12 0:32:06

EasyUI弹出框行编辑，通过下拉框实现内容联动

EasyUI弹出框行编辑&#xff0c;通过下拉框实现内容联动 需求 实现用户支付方式配置&#xff0c;当弹出框加载出来的时候&#xff0c;显示用户现有的支付方式&#xff0c;datagrid的第一列为conbobox,下来选择之后实现后面的数据直接填充&#xff1b; 点击新增&#xff1a;新…...

编程日记 2024/11/12 0:28:02

国产linux系统（银河麒麟，统信uos）使用 PageOffice 实现word文件在线留痕

PageOffice 国产版 &#xff1a;支持信创系统&#xff0c;支持银河麒麟V10和统信UOS&#xff0c;支持X86&#xff08;intel、兆芯、海光等&#xff09;、ARM&#xff08;飞腾、鲲鹏、麒麟等&#xff09;、龙芯&#xff08;LoogArch&#xff09;芯片架构。 查看本示例演示效果 …...

编程日记 2024/11/12 0:27:00

使用亚马逊 S3 连接器为 PyTorch 和 MinIO 创建地图式数据集

在深入研究 Amazon 的 PyTorch S3 连接器之前&#xff0c;有必要介绍一下它要解决的问题。许多 AI 模型需要使用无法放入内存的数据进行训练。此外&#xff0c;许多为计算机视觉和生成式 AI 构建的真正有趣的模型使用的数据甚至无法容纳在单个服务器附带的磁盘驱动器上。解决存…...

编程日记 2024/11/12 0:23:58

自动化运维：提升效率与稳定性的关键技术实践

自动化运维&#xff1a;提升效率与稳定性的关键技术实践 在数字化转型的浪潮中&#xff0c;企业对于IT系统的依赖日益加深&#xff0c;系统的复杂性和规模也随之膨胀。面对这一挑战&#xff0c;传统的运维模式——依靠人工进行服务器的监控、配置变更、故障排查等任务&#xf…...

编程日记 2024/11/12 0:21:56

Google Go编程风格指南-介绍

关于 首先应该明确的是&#xff1a;Go语言是Google搞出来的&#xff0c;这个编程风格指南也是它提出来的&#xff0c;详见&#xff1a;https://google.github.io/styleguide/go/。 然后国内翻译组跟上&#xff0c;于是有了中文版&#xff1a;https://gocn.github.io/stylegui…...

编程日记 2024/11/12 0:20:55

思科模拟器路由器配置实验

一、实验目的 了解路由器的作用。掌握路由器的基本配置方法。掌握路由器模块的使用和互连方式。 二、实验环境 设备&#xff1a; 2811 路由器 1 台计算机 2 台Console 配置线 1 根网线若干根 拓扑图&#xff1a;实验拓扑图如图 8-1 所示。计算机 IP 地址规划&#xff1a;如表…...

编程日记 2024/11/12 0:17:53

机器学习—选择激活函数

可以为神经网络中的不同神经元选择激活函数&#xff0c;我们将从如何为输出层选择它的一些指导开始&#xff0c;事实证明&#xff0c;取决于目标标签或地面真相标签y是什么&#xff0c;对于输出层的激活函数&#xff0c;将有一个相当自然的选择&#xff0c;然后看看激活函数的选…...

编程日记 2024/11/12 0:16:52

[ Linux 命令基础 4 ] Linux 命令详解-文本处理命令

&#x1f36c; 博主介绍 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 _PowerShell &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 &#x1f389;点赞➕评论➕收藏 养成习…...

编程日记 2024/11/12 0:15:51

Odoo:免费开源的钢铁冶金行业ERP管理系统

文 / 开源智造 Odoo亚太金牌服务 简介 Odoo免费开源ERP集成计质量设备大宗原料采购&#xff0c;备件设材全生命周期&#xff0c;多业务模式货控销售&#xff0c;全要素追溯单品&#xff0c;无人值守计量物流&#xff0c;大宗贸易交易和精细化成本管理等方案&#xff1b;覆盖…...

编程日记 2024/11/12 0:14:50

33.Redis多线程

1.Redis队列与Stream Redis5.0 最大的新特性就是多出了一个数据结构 Stream&#xff0c;它是一个新的强大的支持多播的可持久化的消息队列。 Redis Stream 的结构如上图所示,每一个Stream都有一个消息链表&#xff0c;将所有加入的消息都串起来&#xff0c;每个消息都有一个唯…...

编程日记 2024/11/12 0:10:45

【Python】解析 XML

1、Python 对 XML 的解析 1.1 SAX (simple API for XML ) SAX 解析器使用事件驱动模型&#xff0c;通过在解析XML的过程中触发一个个的事件并调用用户定义的回调函数来处理XML文件。 xml.sax 模块牺牲了便捷性来换取速度和内存占用。 事件驱动指一种基于回调&#xff08;ca…...

编程日记 2024/11/12 0:09:42

【复平面】-复数相乘的几何性质

文章目录 从数学上证明1. 计算乘积 z 1 ⋅ z 2 z_1 \cdot z_2 z1​⋅z2​2. 应用三角恒等式3. 得出结果 从几何角度证明1.给出待乘的复数 u i u_i ui​2.给出任意复数 l l l3.复数 l l l 在不同坐标轴下的表示图 首先说结论&#xff1a; 在复平面中&#xff0c;两个复数&a…...

编程日记 2024/11/12 0:08:42

为什么ta【给脸不要脸】：利他是一种选择，善良者的自我救赎与智慧策略

你满腔热忱&#xff0c;他却视而不见&#xff1b; 你伸出援手&#xff0c;他却恩将仇报&#xff1b; 你谦让包容&#xff0c;他却得寸进尺&#xff1b; 你善意提拔&#xff0c;他却并不领情&#xff0c;反而“给脸不要脸”。 所有人都曾被这种“好心当成驴肝肺”遭遇内耗&a…...

编程日记 2024/11/12 0:07:40

mysql 配置文件 my.cnf 增加 lower_case_table_names = 1 服务启动不了的原因

原因&#xff1a;在MySQL8.0之后的版本&#xff0c;只允许在数据库初始化时指定&#xff0c;之后不允许修改了 mysql 配置文件 my.cnf 增加 lower_case_table_names 1 服务启动不了 报错信息&#xff1a;Job for mysqld.service failed because the control process exited …...

编程日记 2024/11/12 0:04:38

SIwave：释放 SIwizard 求解器的强大功能

SIwave 是一种电源完整性和信号完整性工具。SIwizard 是 SIwave 中 SI 分析的主要工具&#xff0c;也是本博客的主题。 SIwizard 用于研究 RF、clock 和 control traces 的信号完整性。该工具允许用户进行瞬态分析、眼图分析和 BER 计算。用户可以将 IBIS 和 IBIS-AMI 模型添加…...

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

强化学习不愧“顶会收割机”！2大创新思路带你上大分，毕业不用愁！

强化学习之父Richard Sutton悄悄搞了个大的&#xff0c;提出了一个简单思路&#xff1a;奖励聚中。这思路简单效果却不简单&#xff0c;等于是给几乎所有的强化学习算法上了一个增强buff&#xff0c;所以这篇论文已经入选了首届强化学习会议&#xff08;RLC 2024&#xff09;&a…...

编程日记 2024/11/12 0:00:33

mac 修改启动图图标数量

调整每行显示图标数量&#xff1a; defaults write com.apple.dock springboard-rows -int 7 调整每列显示的数量 defaults write com.apple.dock springboard-columns -int 8 最后重置一下启动台 defaults write com.apple.dock ResetLaunchPad -bool TRUE;killall Dock 其…...

编程日记 2024/11/11 23:58:31

网站架构知识之Ansible进阶（day022）

1.handler触发器 应用场景&#xff1a;一般用于分发配置文件时候&#xff0c;如果配置文件有变化&#xff0c;则重启服务&#xff0c;如果没有变化&#xff0c;则不重启服务 案列01&#xff1a;分发nfs配置文件&#xff0c;若文件发生改变则重启服务 2.when判断 用于给ans运…...

编程日记 2024/11/11 23:56:29

VMware调整窗口为可以缩小但不改变显示内容的大小

也就是缩小窗口不会影响内容的大小 这样设置就好...

编程日记 2024/11/11 23:53:25

Vue 3 中，ref 和 reactive的区别

在 Vue 3 中&#xff0c;ref 和 reactive 是两种用于创建响应式数据的方法。它们有一些关键的区别和适用场景。以下是它们的主要区别&#xff1a; ref 用途&#xff1a; ref 主要用于处理基本数据类型&#xff08;如字符串、数字、布尔值等&#xff09;以及需要单独响应的复杂…...

编程日记 2024/11/11 23:52:23

window 利用Putty免密登录远程服务器

1 在本地电脑用putty-gen生成密钥 参考1 参考2 2 服务器端操作 将公钥上传至Linux服务器。 复制上述公钥到服务器端的authorized_keys文件 mkdir ~/.ssh vi ~/.ssh/authorized_keys在vi编辑器中&#xff0c;按下ShiftInsert键或者右键选择粘贴&#xff0c;即可将剪贴板中的文…...

编程日记 2024/11/11 23:51:17

OGNL表达式

介绍 OGNL生来就是为了简化Java属性的取值&#xff0c;比如想根据名称name引用当前上下文环境中的对象&#xff0c;则直接键入即可&#xff0c;如果想要引用当前上下文环境中对象text的属性title&#xff0c;则键入text.title即可。如果想引用对象的非值属性&#xff0c;OGNL也…...

编程日记 2024/11/11 23:50:15

AI 大模型重塑软件开发流程的现状与未来展望

![在这里插## 标题入图片描述](https://i-blog.csdnimg.cn/direct/cf41e32d3b3649ce9a543afd4d31abba.gif#pic_center)​ 大家好&#xff0c;我是程序员小羊&#xff01; 前言&#xff1a; 随着AI技术&#xff0c;尤其是大模型的快速发展&#xff0c;软件开发领域正在经历深刻…...

编程日记 2024/11/11 23:47:13

Spring Boot 的核心注解

一、引言 Spring Boot 作为一种流行的 Java 开发框架&#xff0c;以其简洁高效的开发方式受到广泛关注。其中&#xff0c;核心注解在 Spring Boot 应用的开发中起着至关重要的作用。理解这些注解的含义和用法&#xff0c;对于充分发挥 Spring Boot 的优势至关重要。本文将深入剖…...

编程日记 2024/11/11 23:45:11

蓝桥杯备考——算法

一、排序 冒泡排序、选择排序、插入排序、 快速排序、归并排序、桶排序 二、枚举 三、二分查找与二分答案 四、搜索&#xff08;DFS&#xff09; DFS&#xff08;DFS基础、回溯、剪枝、记忆化&#xff09; 1.DFS算法&#xff08;深度优先搜索算法&#xff09; 深度优先搜…...

编程日记 2024/11/11 23:42:07

MutationObserver与IntersectionObserver的区别

今天主要是分享一下MutationObserver和IntersectionObserver的区别&#xff0c;希望对大家有帮助! MutationObserver 和 IntersectionObserver 的区别 MutationObserver 作用&#xff1a;用于监听 DOM 树的变动&#xff0c;包括&#xff1a;元素的属性、子元素列表或节点文本的…...

编程日记 2024/11/11 23:40:06

生产与配置

1.鲁滨孙克苏鲁经济 鲁滨孙克苏鲁经济是一种非常简单的自给自足的经济&#xff0c;劳动时间与休息时间总和为总的时间。 即 摘椰子的数量为劳动时间的函数 由于鲁滨孙喜欢椰子&#xff0c;厌恶劳动时间&#xff0c;因此无差异曲线表现为厌恶品的形态。 根据无差异曲线和生…...

编程日记 2024/11/11 23:38:03