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

webpack(react)基本构建

文章目录

    • 概要
    • 整体架构流程
    • 技术名词解释
    • 技术细节
    • 小结

概要

Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它的主要功能是将各种资源(如 JavaScript、CSS、图片等)视为模块,并将它们打包成一个或多个输出文件,以便在浏览器中使用。以下是对 Webpack 的一些关键理解:

1. 模块化

Webpack 采用模块化的概念,允许开发者将应用程序拆分成多个独立的模块。每个模块可以是一个 JavaScript 文件、CSS 文件,甚至是图片或字体。Webpack 会分析这些模块之间的依赖关系,并生成一个依赖图。

2. 入口和输出

  • 入口(Entry):Webpack 的构建过程从入口文件开始。开发者可以指定一个或多个入口文件,Webpack 会从这些文件开始构建依赖图。
  • 输出(Output):Webpack 允许开发者配置输出的文件名和文件路径。默认情况下,Webpack 会将打包后的文件输出到 dist 目录。

3. 加载器(Loaders)

加载器是 Webpack 的核心概念之一。它们允许开发者处理非 JavaScript 文件(如 CSS、Sass、TypeScript、图片等)。通过使用加载器,Webpack 可以将这些文件转换为有效的模块。例如,使用 babel-loader 可以将 ES6+ 的 JavaScript 转换为兼容的 ES5 代码。

4. 插件(Plugins)

插件是 Webpack 的另一重要特性。它们提供了更强大的功能,能够扩展 Webpack 的功能。通过插件,开发者可以执行各种任务,比如压缩代码、提取 CSS、生成 HTML 文件、热模块替换等。常用的插件包括 HtmlWebpackPluginMiniCssExtractPluginTerserWebpackPlugin

5. 开发服务器(Dev Server)

Webpack 提供了一个开发服务器(webpack-dev-server),可以在本地开发时提供即时的热重载功能。当代码发生变化时,开发服务器会自动刷新浏览器,帮助开发者更高效地进行开发。

6. 优化

Webpack 提供了一系列优化选项,如代码分割(Code Splitting)、懒加载(Lazy Loading)、树摇(Tree Shaking)等。这些功能可以帮助减小输出文件的大小,提高加载速度和性能。

7. 配置

Webpack 的配置文件通常是一个 JavaScript 文件(webpack.config.js),开发者可以在其中定义入口、输出、加载器、插件等配置项。尽管 Webpack 的配置文件可以非常复杂,但它也提供了灵活性,允许开发者根据项目需求进行定制。

8. 社区和生态系统

Webpack 拥有一个活跃的社区和丰富的生态系统,提供了大量的插件和加载器,可以满足各种需求。这个生态系统使得 Webpack 成为前端开发中非常流行的工具之一。

总结

Webpack 是一个强大且灵活的工具,可以帮助开发者构建现代化的 JavaScript 应用程序。通过模块化、加载器、插件和优化等特性,Webpack 有效地管理和打包应用程序的资源,提升开发效率和应用性能。虽然学习曲线可能较陡峭,但掌握 Webpack 后,开发者能够更好地管理复杂的前端项目。

整体架构流程

1. 初始化

  • 配置文件:Webpack 从配置文件(通常是 webpack.config.js)开始读取配置。这个文件定义了 Webpack 的入口、输出、模块、插件等各种设置。
  • 环境变量:Webpack 会根据环境变量(如 NODE_ENV)来决定是以开发模式还是生产模式运行。

2. 入口(Entry)

  • 解析入口文件:Webpack 根据配置中的入口(entry)选项,确定从哪个文件开始构建依赖图。入口可以是一个文件,也可以是一个数组或对象(用于多入口)。
  • 构建依赖图:Webpack 会分析入口文件中的 import 和 require 语句,递归解析所有依赖的模块,形成一个完整的依赖图。

3. 模块解析(Module Resolution)

  • 加载器(Loaders):在解析模块时,Webpack 会使用加载器来处理不同类型的文件。加载器可以将非 JavaScript 文件(如 CSS、图片、TypeScript 等)转换为有效的模块。
  • 执行模块:Webpack 会执行每个模块,生成一个模块对象并将其缓存,以便在后续引用时能够快速访问。

4. 插件(Plugins)

  • 应用插件:在构建过程中,Webpack 会调用配置中的插件。插件可以在不同的生命周期钩子中执行特定的任务,如优化代码、生成 HTML 文件、提取 CSS 等。
  • 增强功能:插件的作用非常广泛,可以用来增强 Webpack 的功能,处理各种复杂的构建需求。

5. 输出(Output)

  • 生成输出文件:Webpack 根据输出配置,将打包后的文件生成到指定的输出目录。输出文件的名称可以使用占位符(如 [name][hash] 等)进行动态命名。
  • 生成清单文件:Webpack 还可以生成清单文件(如 manifest.json),记录模块之间的依赖关系和版本信息。

6. 优化

  • 代码分割(Code Splitting):Webpack 支持将代码拆分成多个文件,以便按需加载,减少初始加载时间。
  • 树摇(Tree Shaking):Webpack 会通过静态分析删除未使用的代码,减小输出文件的大小。
  • 压缩和混淆:在生产模式下,Webpack 通常会使用插件(如 TerserWebpackPlugin)来压缩和混淆代码,提高性能。

7. 开发服务器(Dev Server)

  • 热模块替换(Hot Module Replacement, HMR):Webpack 提供了开发服务器,可以在开发过程中实现热模块替换,允许开发者在不刷新页面的情况下更新模块。
  • 实时重载:开发服务器会监控文件变化,并自动刷新浏览器,提升开发效率。

8. 完成

  • 构建完成:Webpack 在完成所有模块的解析、处理和输出后,构建过程结束。开发者可以在浏览器中查看打包后的应用程序。

技术名词解释

1. 模块(Module)

在 Webpack 中,模块是构成应用程序的基本单元。每个模块可以是一个 JavaScript 文件、CSS 文件、图像或其他资源。Webpack 将这些模块视为独立的单元,并在构建过程中处理它们的依赖关系。

2. 入口(Entry)

入口是 Webpack 开始构建的地方。它指向应用程序的主文件或多个文件,Webpack 从这些文件开始解析依赖关系。可以通过配置文件中的 entry 属性来指定。

3. 输出(Output)

输出是 Webpack 打包后生成的文件的配置。它定义了打包文件的名称、路径和其他输出选项。通过配置文件中的 output 属性来设置。

4. 加载器(Loader)

加载器是 Webpack 的一个核心概念,用于处理非 JavaScript 文件。它们允许开发者将不同类型的文件(如 CSS、Sass、TypeScript、图片等)转换为有效的模块。加载器在 Webpack 构建过程中执行,可以在配置中通过 module.rules 来定义。

5. 插件(Plugin)

插件是 Webpack 的另一重要特性,用于扩展 Webpack 的功能。插件可以在构建的不同阶段执行特定的任务,如优化代码、生成 HTML 文件、提取 CSS 等。通过配置文件中的 plugins 数组来使用插件。

6. 依赖图(Dependency Graph)

依赖图是 Webpack 在构建过程中生成的一个结构,表示模块之间的依赖关系。Webpack 根据入口文件分析所有模块及其依赖,形成一个完整的依赖图,以便在打包时正确处理模块的顺序。

7. 热模块替换(Hot Module Replacement, HMR)
 热模块更换(Hot Module Replacement,HMR)

热模块替换是 Webpack 提供的一项功能,允许在开发过程中替换、添加或删除模块,而无需完全刷新页面。这有助于提高开发效率,保持应用程序的状态。

8. 代码分割(Code Splitting)

代码分割是 Webpack 的一项优化技术,允许将代码拆分成多个小块,以便按需加载。这可以减少初始加载时间,提高应用程序的性能。

9. 树摇(Tree Shaking)

树摇是 Webpack 的一项优化技术,旨在通过静态分析删除未使用的代码,从而减小输出文件的大小。这通常在生产模式下进行,以提高应用程序的性能。

10. 开发服务器(Dev Server)

Webpack 提供的开发服务器(webpack-dev-server)用于在本地开发时提供即时的热重载功能。它监控文件的变化,并在发生变化时自动刷新浏览器。

11. 清单文件(Manifest)

清单文件是 Webpack 生成的一个 JSON 文件,记录了模块之间的依赖关系和版本信息。它用于帮助管理和加载模块,尤其是在使用代码分割时。

12. 配置文件(Configuration File)

Webpack 的配置文件通常是一个 JavaScript 文件(webpack.config.js),用于定义 Webpack 的入口、输出、加载器、插件等各种设置。配置文件可以根据项目的需求进行定制。

13. 环境变量(Environment Variables)

环境变量用于配置 Webpack 在不同环境下的行为,如开发模式和生产模式。通常使用 NODE_ENV 来指示当前的环境,以便在构建时应用不同的优化和设置。

14. 输出文件名占位符(Output Filename Placeholders)

Webpack 允许在输出文件名中使用占位符(如 [name][hash][chunkhash] 等)进行动态命名。这有助于实现缓存策略和版本控制。

15. 异步加载(Lazy Loading)

异步加载是一种技术,允许在需要时加载模块,而不是在应用程序启动时加载所有模块。这可以通过代码分割和动态 import() 实现,帮助提高应用程序的性能。

技术细节

1、我们可以先通过命令npx i create-react-app my-app创建一个react项目。

2、在根目录创建两个文件:

        webpack.config.dev.js写开发环境配置
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')const config = {entry: './src/index.js',output: {filename: '[name].js',path: path.resolve(__dirname, './dist')},mode: 'development',plugins: [new HtmlWebpackPlugin({template: './public/index.html'}),// new MiniCssExtractPlugin()],devServer: {static: {directory: path.join(__dirname, 'public'),},compress: true,port: 9000,},module: {rules: [{test: /\.css$/,use: ['style-loader','css-loader',]},{test:/\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader',}},{test:[/\.bmp$/, /\.png$/, /\.jpe?g$/, /\.gif$/],type:'asset'},{test: /\.svg$/,use: 'url-loader'}]}
}module.exports = config
在运行之前还要配置babel.config.json文件,这里是babel的预设。
{"presets":[["@babel/preset-react",{"runtime": "automatic"}]]
}
webpack.congif.prod.js写生产环境代码,生产环境中没有devServer的配置
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')const config = {entry: './src/index.js',output: {filename: '[name].js',path: path.resolve(__dirname, './dist')},mode: 'production',plugins: [new HtmlWebpackPlugin({template: './public/index.html'}),new MiniCssExtractPlugin()],module: {rules: [{test: /\.css$/,use: [// 'style-loader',MiniCssExtractPlugin.loader,'css-loader',]},{test:/\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader',}},{test:[/\.bmp$/, /\.png$/, /\.jpe?g$/, /\.gif$/],type:'asset'},{test: /\.svg$/,use: 'url-loader'}]}
}module.exports = config

3、修改pageage.json文件中的启动命令

"scripts": {"my_dev": "webpack serve --config webpack.config.dev.js","my_prod": "webpack build --config webpack.config.prod.js"},

4、手动发布

通过npm run my_prod构建打包,生成dist文件夹。

对于前端来说

拿到一个项目首先需要通过npm i 回复依赖

其次我们可以在腾讯云搜索cos  对象存储,共有读私有写。

我们要将除了index.html文件之外的所有静态资源文件(图片/js文件/css文件)放到cdn上

根据生成的cdn远程链接,替换在打包完成之后的index.html的两个标签中我下面勾出来的就是要替换的位置。

对于后端来说

将前端打包之后生成的index.html代码复制替换到后端node的html模版位置。

小结

学会webpack的基础搭建,你就已经超越了70%拥有三年前端开发经验的程序员,所以这部分还是需要用心去掌握的。

相关文章:

webpack(react)基本构建

文章目录 概要整体架构流程技术名词解释技术细节小结 概要 Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它的主要功能是将各种资源(如 JavaScript、CSS、图片等)视为模块,并将它们打包成一个或多个输出文件,以便…...

《Opencv》基础操作<1>

目录 一、Opencv简介 主要特点: 应用领域: 二、基础操作 1、模块导入 2、图片的读取和显示 (1)、读取 (2)、显示 3、 图片的保存 4、获取图像的基本属性 5、图像转灰度图 6、图像的截取 7、图…...

Oracle 11g R2 RAC 到单实例 Data Guard 搭建(RMAN备份方式)

一、配置方案 环境说明 角色主库主库备库主机名rac01rac02racdg公网IP10.10.10.14110.10.10.14310.10.10.191VIP10.10.10.14210.10.10.144-SCAN10.10.10.14010.10.10.140-INSTANCE_NAMEorcl1orcl2orclDB_NAMEorclorclorclSERVICE_NAMEorclorclorclDB_UNIQUE_NAMEorclorclorcl…...

HTTPS 加密

HTTPS 加密技术 1. HTTPS 概述 HTTPS(HyperText Transfer Protocol Secure)是 HTTP 协议的安全版本,利用 SSL/TLS 协议对通信进行加密,确保数据的机密性、完整性和身份认证。HTTPS 在保护敏感数据的传输(如登录凭证、…...

泛微e9开发 编写前端请求后端接口方法以及编写后端接口

泛微e9开发 前端请求后端接口以及后端发布接口 前端请求后端接口 前端发起get请求 fetch(/api/youpath, {method: GET, // 默认 GET 方法,可以省略headers: {Content-Type: application/json, // 通常 GET 请求无需指定 body,Content-Type 不太重要},…...

Linux —— 《线程控制》

文章目录 前言:为什么要链接pthread库?线程控制:线程创建:start_routine?传递自定义类型同一份栈空间? 线程等待:返回值与参数?创建多线程 线程终止线程分离 前言: 上一文我们学习…...

基于HTML+CSS的房地产销售网站设计与实现

摘 要 房地产销售系统,在二十年来互联网时代下有着巨大的意义,随着互联网不断的发展扩大,一个方便直 观的房地产管理系统的网站开发是多么地有意义,不仅打破了传统的线下看房,线下获取资讯,也给房地产从业…...

操作系统 | 学习笔记 | 王道 | 2.4死锁

2.4 死锁 文章目录 2.4 死锁2.4.1 死锁的概念2.4.2 死锁预防2.4.3 死锁避免2.4.4 死锁检测和解除 2.4.1 死锁的概念 死锁的定义 在并发环境下,各进程因竞争资源而造成的一种互相等待对方手里的资源,导致各进程都阻塞,都无法向前推进的现象&am…...

【FPGA开发】Vivado自定义封装IP核,绑定总线

支持单个文件的封装、整个工程的封装,这里用单个文件举例。 在文件工程目录下,自建一个文件夹,里面放上需要封装的verilog文件。 选择第三个,指定路径封装,找到文件所在目录 取个名,选择封装IP的路径 会…...

python的3D可视化库vedo-3 (visual模块)点对象的属性、光效、附注

文章目录 3 PointsVisual的方法3.1 对象属性3.1.1 顶点大小3.1.2 复制属性3.1.3 颜色设置3.1.4透明度设置 3.2 对象光效3.2.1 点的形状3.2.2 点的表面光效 3.3 尾随线和投影3.3.1 尾随线3.3.2 投影 3.4 给对象附加文字说明3.4.1 标注3.4.2 2D标注3.4.3 气泡说明3.4.4 旗标说明3…...

llamaindex实战-ChatEngine-ReAct Agent模式

概述 ReAct 是一种基于Agent的聊天模式,构建在数据查询引擎之上。对于每次聊天交互,代理都会进入一个 ReAct 循环: 首先决定是否使用查询引擎工具并提出适当的输入 (可选)使用查询引擎工具并观察其输出 决定是否重复…...

redis快速进门

、数据库类型认识 关系型数据库 关系型数据库是一个结构化的数据库,创建在关系模型(二维表格模型)基础上,一般面向于记录。 SQL 语句(标准数据查询语言)就是一种基于关系型数据库的语言,用于执行…...

从0开始linux(39)——线程(2)线程控制

欢迎来到博主的专栏:从0开始linux 博主ID:代码小豪 文章目录 线程创建线程标识符线程参数多线程竞争资源 回收线程detach 线程退出pthread_cancel 线程创建 线程创建的函数为pthread_create。该函数是包含在posix线程库当中,posix线程是C语言…...

International Journal of Medical Informatics投稿经历时间节点

20240423,完成投稿 20240612,按编辑要求修改后再投, with editor 20240613,under review,completed 0, accepted 0, invitation 2. 20240620, under review,completed 0, accepted 1, invitation 2. 20240626, unde…...

BUUCTF—Reverse—Java逆向解密(10)

程序员小张不小心弄丢了加密文件用的秘钥,已知还好小张曾经编写了一个秘钥验证算法,聪明的你能帮小张找到秘钥吗? 注意:得到的 flag 请包上 flag{} 提交 需要用专门的Java反编译软件:jd-gui 下载文件,发现是个class文…...

CLIP-MMA: Multi-Modal Adapter for Vision-Language Models

当前的问题 CLIP-Adapter仅单独调整图像和文本嵌入,忽略了不同模态之间的交互作用。此外,适应性参数容易过拟合训练数据,导致新任务泛化能力的损失。 动机 图1所示。多模态适配器说明。 通过一种基于注意力的 Adapter ,作者称之…...

三维扫描仪-3d扫描建模设备自动检测尺寸

在现代工业制造领域,三维扫描仪已成为实现高精度尺寸检测的关键设备。CASAIM自动化智能检测系统以其自动化三维立体扫描技术,为产品尺寸的自动检测提供了高效、可靠的解决方案。 CASAIM自动化智能检测系统通过非接触式测量方式,通过激光扫描…...

vue3+ant design vue实现日期选择器默认显示当前年,并限制用户只能选择当前年及之前~

1、思路:之前想拿当前年直接做赋值操作,实际上是行不通的,因为组件本身有数据格式限制,会出现报错,然后索性直接获取当前日期(YYYY-MM-DD)赋值给日期组件,这样不管你用的是年&#x…...

【electron-vite】搭建electron+vue3框架基础

一、拉取项目 electron-vite 中文文档地址: https://cn-evite.netlify.app/guide/ 官网网址:https://evite.netlify.app/ 版本 vue版本:vue3 构建工具:vite 框架类型:Electron JS语法:TypeScript &…...

05《存储器层次结构与接口》计算机组成与体系结构 系列课

目录 存储器层次结构概述 层次结构的定义 存储器的排名 存储器接口 处理器与存储器的速度匹配 存储器接口的定义 存储器访问命中率 两种接口 第1种方式:并行 命中率的计算 存储器访问时间 第2种方式:逐级 结语 大家好,欢迎回来。…...

elasticsearch报错fully-formed single-node cluster with cluster UUID

1.问题描述 k8s集群内部署的es中间件起不来,查看日志发现如下警告,节点发现功能开启,但是目前我是单节点服务,所以尝试编辑sts将节点发现功能去掉或者在部署时将你的sts的yaml文件和chart文件修改重新部署以去掉该功能 {"t…...

Milvus×Florence:一文读懂如何构建多任务视觉模型

近两年来多任务学习(Multi-task learning)正取代传统的单任务学习(single-task learning),逐渐成为人工智能领域的主流研究方向。其原因在于,多任务学习可以让我们以最少的人力投入,获得尽可能多…...

DAPP

02-DAPP 1 啥是 DApp? DApp,部署在链上的去中心化的应用。 DApp 是开放源代码,能运行在分布式网络上,通过网络中不同对等节点相互通信进行去中心化操作的应用。 DAPP 开放源代码,才能获得人的信任。如比特币&#xff…...

生产环境中,nginx 最多可以代理多少台服务器,这个应该考虑哪些参数 ?怎么计算呢

生产环境中,nginx 最多可以代理多少台服务器,这个应该考虑哪些参数 ?怎么计算呢 关键参数计算方法评估步骤总结 在生产环境中,Nginx最多可以代理的服务器数量并没有一个固定的限制,它取决于多个因素,包括Ng…...

【深度学习|目标跟踪】StrongSORT 详解(以及StrongSORT++)

StrongSort详解 1、论文及源码2、DeepSORT回顾3、StrongSORT的EMA4、StrongSORT的NSA Kalman5、StrongSORT的MC6、StrongSORT的BOT特征提取器7、StrongSORT的AFLink8、StrongSORT的GSI模块 1、论文及源码 论文地址:https://arxiv.org/pdf/2202.13514 源码地址&#…...

23种设计模式-原型(Prototype)设计模式

文章目录 一.什么是原型设计模式?二.原型模式的特点三.原型模式的结构四.原型模式的优缺点五.原型模式的 C 实现六.原型模式的 Java 实现七. 代码解析八.总结 类图: 原型设计模式类图 一.什么是原型设计模式? 原型模式(Prototype…...

Qt—QLineEdit 使用总结

文章参考:Qt—QLineEdit 使用总结 一、简述 QLineEdit是一个单行文本编辑控件。 使用者可以通过很多函数,输入和编辑单行文本,比如撤销、恢复、剪切、粘贴以及拖放等。 通过改变 QLineEdit 的 echoMode() ,可以设置其属性,比如以密码的形式输入。 文本的长度可以由 m…...

go-zero使用自定义模板实现统一格式的 body 响应

前提 go环境的配置、goctl的安装、go-zero的基本使用默认都会 需求 go-zero框架中,默认使用goctl命令生成的代码并没有统一响应格式,现在使用自定义模板实现统一响应格式: {"code": 0,"msg": "OK","d…...

BUGKU printf

整体思路 实现循环-->获取libc版本和system函数地址->将strcpy的got表项修改为system并获得shell 第一步:实现循环 从汇编语句可以看出,在每次循环结束时若0x201700处的值是否大于1则会继续循环。 encode1会将编码后的结果保存至0x2015c0处&am…...

深度学习:梯度下降法

损失函数 L:衡量单一训练样例的效果。 成本函数 J:用于衡量 w 和 b 的效果。 如何使用梯度下降法来训练或学习训练集上的参数w和b ? 成本函数J是参数w和b的函数,它被定义为平均值; 损失函数L可以衡量你的算法效果&a…...