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.mzph.cn/pingmian/62512.shtml

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

相关文章

html select下拉多选 修改yselect.js插件实现下拉多选,搜索,限制选中,默认回显等操作

需求:要在select标签实现下拉多选,搜索,限制选中,默认回显等操作,之前同事用的yselect.js,网上用的简直是寥寥无几,找了半天没找到限制选中的方法,看了源代码才发现根本没有&#xf…

c++哈希表(原理、实现、开放寻址法)适合新手

c系列哈希的原理及实现(上) 文章目录 c系列哈希的原理及实现(上)前言一、哈希的概念二、哈希冲突三、哈希冲突解决3.1、开放寻址法3.2、删除操作3.3、负载因子四、代码实现 总结 前言 红黑树平衡树和哈希有不同的用途。 红黑树、…

了解HTTPS以及CA在其中的作用

在这个信息爆炸的时代,每一次指尖轻触屏幕,都是一次数据的旅行。但您是否真正了解,这些数据在通往目的地的旅途中,是如何被保护的呢? HTTPS(HyperText Transfer Protocol Secure)是一种安全的网…

Flink学习连载文章8--时间语义

Time的分类 (时间语义) EventTime:事件(数据)时间,是事件/数据真真正正发生时/产生时的时间 IngestionTime:摄入时间,是事件/数据到达流处理系统的时间 ProcessingTime:处理时间,是事件/数据被处理/计算时的系统的时间 EventTime的重要性 假设,你正在去往地下停…

sizeof和strlen区分,(好多例子)

sizeof算字节大小 带\0 strlen算字符串长度 \0之前

Simulink的SIL软件在环测试

以基于模型的设计(MBD)的软件开发时,需要进行SIL(软件在环测试)。SIL测试就是在PC上验证模型是否与代码功能一致。在项目开展中,用在需要将控制器生成移植到硬件前,把控制器的模块生成代码&…

浅谈js中onmouseleave和onmouseout的区别

同步发布于我的网站 🚀 背景介绍基本概念区别详解 无子元素的情况有子元素的情况 实际应用场景 使用 onmouseleave使用 onmouseout 注意事项总结 背景介绍 在前端开发中,我们经常需要为元素绑定鼠标事件,以实现各种交互效果。onmouseleave…

【Git系列】利用 Bash 脚本获取 Git 最后一次非合并提交的提交人

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

36 基于单片机的电磁炉系统设计

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 基于51单片机,通过DS18B20温度传感器检测温度,通过八位数码管显示, 如果温度超过阈值,则蜂鸣器报警,红灯亮起;若不超过阈值&…

『 Linux 』数据链路层 - ARP协议及数据链路层周边问题

文章目录 ARP协议ARP欺骗RARP协议 DNS服务ICMP协议ping 命令正向代理服务器反向代理服务器 ARP协议 博客『 Linux 』数据链路层 - MAC帧/以太网帧中提到,当数据需要再数据链路层进行无网络传输时需要封装为MAC帧,而MAC帧的报文结构如下: 帧头部分存在两个字段分别为 “目的地址…

MySQL(数据库)

1.数据库? 数据库是管理数据(增删改查CRUD)的软件 MySQL(开源&免费) 是一个数据库软件 (客户端-服务器)结构的软件 客户端服务器通过网络进行通信 客户端(Client):主动发起请求的一方,客户端给服务器发起的数据称为请求(request) 服务器(Server):被动接受请求的一方,…

vue3----API

组合式API 1.setup 定义的数据和方法必须return出去才能够被使用 不使用this,this指向了undefined <script> export default {setup () {console.log(setup)const message this is messageconst logmessage ()>{console.log(message)}return {message,logmessag…

服务器遭受DDoS攻击后如何恢复运行?

当服务器遭受 DDoS&#xff08;分布式拒绝服务&#xff09;攻击 后&#xff0c;恢复运行需要快速采取应急措施来缓解攻击影响&#xff0c;并在恢复后加强防护以减少未来攻击的风险。以下是详细的分步指南&#xff1a; 一、应急处理步骤 1. 确认服务器是否正在遭受 DDoS 攻击 …

【maven-5】Maven 项目构建的生命周期:深入理解与应用

1. 生命周期是什么 ​在Maven出现之前&#xff0c;项目构建的生命周期就已经存在&#xff0c;软件开发人员每天都在对项目进行清理&#xff0c;编译&#xff0c;测试及部署。虽然大家都在不停地做构建工作&#xff0c;但公司和公司间&#xff0c;项目和项目间&#xff0c;往往…

【机器学习】CatBoost 模型实践:回归与分类的全流程解析

一. 引言 本篇博客首发于掘金 https://juejin.cn/post/7441027173430018067。 PS&#xff1a;转载自己的文章也算原创吧。 在机器学习领域&#xff0c;CatBoost 是一款强大的梯度提升框架&#xff0c;特别适合处理带有类别特征的数据。本篇博客以脱敏后的保险数据集为例&#x…

lua download

https://www.lua.org/ https://www.lua.org/versions.html#5.4

基于大数据python 房屋价格数据分析预测可视化系统(源码+LW+部署讲解+数据库+ppt)

&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 很对人不知道选题怎么选 不清楚自己适合做哪块内容 都可以免费来问我 避免后期給自己答辩找麻烦 增加难度&#xff08;部分学校只有一次答辩机会 没弄好就延迟…

pikachu文件上传漏洞通关详解

声明&#xff1a;文章只是起演示作用&#xff0c;所有涉及的网站和内容&#xff0c;仅供大家学习交流&#xff0c;如有任何违法行为&#xff0c;均和本人无关&#xff0c;切勿触碰法律底线 目录 概念&#xff1a;什么是文件上传漏洞一、客户端check二、MIME type三、getimagesi…

Monitor 显示器软件开发设计入门二

基础篇--显示驱动方案输出接口介绍 写在前面&#xff1a;首先申明&#xff0c;这篇文章是写给那些初入显示器软件行业的入门者&#xff0c;或是对显示器没有基本知识的小白人员。如您是行业大咖大神&#xff0c;可以绕行&#xff0c;可看后期进阶文章。 上篇介绍了输入接口及相…

像素流送api ue多人访问需要什么显卡服务器

关于像素流送UE推流&#xff0c;在之前的文章里其实小芹和大家聊过很多&#xff0c;不过今天偶然搜索发现还是有很多小伙伴&#xff0c;在搜索像素流送相关的问题&#xff0c;搜索引擎给的提示有这些。当然这些都是比较短的词汇&#xff0c;可能每个人真正遇到的问题和想获取的…