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%拥有三年前端开发经验的程序员,所以这部分还是需要用心去掌握的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/481819.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MATLAB期末复习笔记(中)

三、MATLAB函数和程序结构 1.MATLAB文件 两种类型的M文件: • 脚本 ,不接受输入参数或返回输出参数。它们处理工作区中的数据。 • 函数 ,可接受输入参数,并返回输出参数。内部变量是函数的局部变量。 ① 函数文件是另一类 m 文…

Mouser EDI 需求分析

为了提高供应链的自动化水平,贸泽电子(Mouser Electronics)使用EDI技术更好地管理与其全球合作伙伴之间的业务数据往来。对接Mouser EDI,对于企业而言,需要在本地部署EDI软件,建立与Mouser之间的EDI连接通道…

[免费]SpringBoot+Vue景区订票(购票)系统【论文+源码+SQL脚本】

大家好,我是java1234_小锋老师,看到一个不错的SpringBootVue大景区订票(购票)系统,分享下哈。 项目视频演示 【免费】SpringBootVue景区订票(购票)系统 Java毕业设计_哔哩哔哩_bilibili 项目介绍 现代经济快节奏发展以及不断完善升级的信息…

GitLab的使用

文章目录 一、什么是GitLab、有什么用、与Jenkins的区别什么是GitLab及其用途GitLab与Jenkins的区别GitLab的CI/CD功能介绍 二、GitLab的安装与配置Linux下GitLab的安装*Linux下GitLab的简单使用 /etc/gitlab/gitlab.rb 的配置GitLab服务器的域名邮箱配置功能优化关闭一些暂时不…

通信与网络基础

1.网络通信基本概念 通信:人、物通过某种介质和行为进行信息传递与交流 网络通信:终端设备之间通过计算机网络进行通信 两个终端通过网线传递文件 多个终端通过路由器传递文件 终端通过Internet下载文件 2.信息传递过程 图1-1 假定A计算机访问B的web…

RAT:融合RAG和CoT的高效多步推理任务策略

今天分享的是由北京大学、加州大学洛杉矶分校和北京通用人工智能研究院合作发表的一篇文章 论文题目:RAT: Retrieval Augmented Thoughts Elicit Context-Aware Reasoning in Long-Horizon Generation 论文链接:https://arxiv.org/pdf/2403.05313 代码地址:https://githu…

应急响应靶机——Windows挖矿事件

载入虚拟机,开启虚拟机: (账户密码:administrator/zgsf123) 发现登录进去就弹出终端界面,自动运行powshell命令,看来存在计划任务,自动下载了一些文件,之后就主动结束退…

构网型与跟网型混合直驱风电场并网稳定域研究

传统的风机变流器控制采用跟网型(grid-following,GFL)控制,需依赖于锁相环跟踪电网电压的频率/相位信息,以实现与电网的同步。随着能源电力系统的转型,电网逐渐转变为呈现低短路比(short-circuitratio,SCR&…

带外配置IP

要想了解带内,私下我 管理IP:9.101.8.20 掩码:255.0.0.0 网关:9.101.0.254 1 首先自己电脑要修改ip 192.168.70.x 段 2 在cmd 去ping 192.168.70.125 必须通 3 去浏览器 登录192.168.70.125 4 更改ip 5 再次修改电脑IP 网关 掩码 7 检测…

设计模式---建造者模式

建造者模式 一种创建型设计模式,它允许你一步一步地构建复杂对象。通过使用建造者模式,你可以将对象的构建过程与其表示分离,使得同样的构建过程可以创建不同的表示。说白点就是,解决了构造函数创建对象的问题。 适用于那种构造函…

学习笔记043——HashMap源码学习1

文章目录 1、HashMap2、Hashtable3、TreeMap4、HashMap 底层结构4.1、什么是红黑树? 1、HashMap HashMap key 是不能重复的,value 可以重复 底层结构 key-value 进行存储,key-value 存入到 Set 中,再将 Set 装载到 HashMap pack…

关于音频 DSP 的接口种类以及其应用场景介绍

在音频系统中,DSP(数字信号处理器)扮演着重要角色,通常会通过不同的接口与音频系统中的其他组件(如功放、扬声器、音频源等)进行连接。以汽车应用场景为例,以下是一些常见的接口类型分类及其介绍…

python实现自动计算排工期

一、需求说明 如果大家涉及到项目管理的话,那么一定逃不掉规划工期。由于在规划工期的时候需要考虑将法定节假日和周六日进行去除,所以许多人都会打开日历,一天一天的去计算。这样效率即慢,同时也容易出现错误,那么如…

【赵渝强老师】PostgreSQL中的模式

在PostgreSQL中,所有的数据库对象都是属于模式中的对象。这里的数据库对象包括:表、索引、视图、存储过程、触发器等等。所有数据库对象都有各自的对象标识符oid(object identifiers),它是一个无符号的四字节整数,相关…

A051-基于Spring Boot的网络海鲜市场系统的设计与实现

🙊作者简介:在校研究生,拥有计算机专业的研究生开发团队,分享技术代码帮助学生学习,独立完成自己的网站项目。 代码可以查看文章末尾⬇️联系方式获取,记得注明来意哦~🌹 赠送计算机毕业设计600…

信息与网络安全笔记2

第三章 对称密钥加密 1.流密码:信息长度与密钥相同(种子密码延伸为key) 分组密码:(confusion)扰乱(diffusion)扩散 2.作用 流密码加密 适用于无线设备或数据速率极高的系统 A5…

网络安全入门之网络安全工具分享-含初期所有工具(附百度网盘链接)

网络安全基础工具 抓包工具 burpsuite 这是一款十分经典的抓包改包工具,在全球范围内使用十分广泛,并且其内置各种插件,具有爆破,自动识别验证码,加解密发包等多种功能 专业版破解网盘链接: 通过百度网…

【AI】JetsonNano启动时报错:soctherm OC ALARM

1、问题描述 将JetsonNano烧写SD卡镜像为Ubuntu20.04后,启动时报错:soctherm OC ALARM,启动失败;然后系统一直重启 2、原因分析 “soctherm OC ALARM”是检测到系统温度超过安全阈值时发出的过热警告。 “soctherm”代表系统…

【传感器技术】第6章 压电式传感器

关注作者了解更多 我的其他CSDN专栏 过程控制系统 工程测试技术 虚拟仪器技术 可编程控制器 工业现场总线 数字图像处理 智能控制 传感器技术 嵌入式系统 复变函数与积分变换 单片机原理 线性代数 大学物理 热工与工程流体力学 数字信号处理 光电融合集成电路…

洛谷 P10491 [USACO09NOV] The Chivalrous Cow B C语言 bfs

题目: https://www.luogu.com.cn/problem/P10491?contestId217365 题目背景 农民 John 有很多牛,他想交易其中一头被 Don 称为 The Knight 的牛。这头牛有一个独一无二的超能力,在农场里像 Knight 一样地跳(就是我们熟悉的象棋…