Webpack配置及工作流程

Webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当Webpack处理应用程序时,它会在内部构建一个依赖图(dependency graph),该图会映射项目所需的每个模块,并生成一个或多个bundle。

基本配置步骤

  1. 安装Webpack和Webpack CLI
    • 使用npm或yarn将Webpack及其命令行接口(CLI)安装为开发依赖。
      npm install --save-dev webpack webpack-cli
  2. 创建项目结构
    • 初始化项目(如果尚未初始化),并创建基本的文件和目录结构,如src(源代码)和dist(分发代码)。
  3. 编写入口文件
    • src目录下创建一个或多个JavaScript文件作为Webpack的入口点。
  4. 创建Webpack配置文件
    • 在项目根目录下创建一个名为webpack.config.js的文件,并配置入口(entry)、出口(output)、模块(module)、插件(plugins)等。
  5. 配置入口和出口
    • 指定Webpack的入口文件和输出文件。
      const path = require('path');
      module.exports = {
      entry: './src/index.js',
      output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
      },
      };
  6. 配置Loader
    • Loader用于处理非JavaScript文件(如CSS、图片等)。需要在module.rules中配置。
      module: {
      rules: [
      {
      test: /\.css$/,
      use: ['style-loader', 'css-loader'],
      },
      // 其他Loader配置...
      ],
      },
  7. 配置Plugin
    • 插件用于执行范围更广的任务,如打包优化、环境变量注入等。
      const HtmlWebpackPlugin = require('html-webpack-plugin');
      module.exports = {
      // ...
      plugins: [
      new HtmlWebpackPlugin({
      template: './src/index.html',
      }),
      // 其他插件配置...
      ],
      };
  8. 运行Webpack
    • package.json中添加脚本命令,或在命令行中直接运行Webpack进行打包。
      "scripts": {
      "build": "webpack --mode production"
      }

高级配置点

  1. 多页应用打包
    • 通过配置多个入口和对应的HtmlWebpackPlugin实例来支持多页应用。
  2. 环境变量
    • 使用DefinePlugin或环境变量文件(如.env文件)来定义不同环境下的变量。
  3. 代码分割
    • 利用Webpack的动态导入功能(如import())和SplitChunksPlugin来分割代码,实现按需加载。
  4. 构建优化
    • 使用Tree Shaking、代码压缩(如TerserPlugin)、图片压缩(如image-webpack-loader)等策略来优化构建结果。
  5. 开发服务器
    • 使用Webpack Dev Server来提供一个简单的web服务器,并支持实时重新加载(live reloading)和热模块替换(hot module replacement, HMR)。

工作流程

一、初始化阶段

  1. 读取配置:Webpack通过读取其配置文件(通常名为webpack.config.js)来确定项目的构建规则和输出。这个文件包含了入口(entry)、出口(output)、模块(module)、插件(plugins)等配置信息。
  2. 初始化参数:从配置文件和命令行参数中读取并合并参数,得出最终的配置参数。
  3. 创建Compiler实例:使用这些参数初始化Compiler对象,并加载所有配置的插件。

二、编译阶段

  1. 确定入口:根据配置中的entry找出所有的入口文件。这些入口文件是Webpack构建依赖图的起点。
  2. 编译模块
    • 从入口文件出发,Webpack会递归地找出所有依赖的模块。
    • 调用所有配置的Loader对模块进行翻译。Loader可以将模块从一种格式转换为另一种格式,例如将ES6代码转换为ES5代码,或将CSS文件转换为JavaScript模块。
    • 在这个过程中,Webpack会构建出一个模块依赖图,这个图表示了所有模块之间的依赖关系。
  3. 完成模块编译:经过Loader翻译后,Webpack得到了每个模块被翻译后的最终内容以及它们之间的依赖关系。

三、输出阶段

  1. 输出资源:根据入口和模块之间的依赖关系,Webpack将模块组合成一个个包含多个模块的Chunk(代码块)。然后,Webpack将这些Chunk转换成一个或多个文件,并加入到输出列表中。
  2. 写入文件系统:在确定好输出内容后,Webpack根据配置确定输出的路径和文件名,并将文件内容写入到文件系统中。

四、插件执行

在Webpack的构建过程中,插件可以在特定的时机执行特定的任务。Webpack通过Tapable来组织这条复杂的构建流程,插件只需要监听它所关心的事件,就能在事件发生时执行相应的逻辑。例如,插件可以用于代码压缩、图片压缩、定义环境变量等。

五、总结

Webpack的工作原理可以概括为:通过读取配置文件确定构建规则,递归地构建模块依赖图,使用Loader翻译模块,将模块组合成Chunk并写入文件系统。在这个过程中,插件可以在特定的时机执行特定的任务,以扩展Webpack的功能。Webpack的这种设计使得它非常灵活和强大,能够处理各种复杂的构建需求。

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

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

相关文章

计算机组成原理:408考研|王道|学习笔记II

系列目录 计算机组成原理 学习笔记I 计算机组成原理 学习笔记II 目录 系列目录第四章 指令系统4.1 指令系统4.1.1 指令格式4.1.2 扩展操作码指令格式 4.2 指令的寻址方式4.2_1 指令寻址4.2_2 数据寻址 4.3 程序的机器级代码表示4.3.1 高级语言与机器级代码之间的对应4.3.2 常用…

游戏AI的创造思路-技术基础-情感计算(1)

游戏中的AI也是可以和你打情感牌的哦,不要以为NPC是没有感情的,不过,不要和NPC打过多的情感牌,你会深陷其中无法自拔的~~~~~~ 目录 1. 情感计算算法定义 2. 发展历史 3. 公式和函数 3.1. 特征提取阶段 TF-IDF(词频…

uniapp app端跳转第三方app(高德地图/百度地图为例)

1.先写一个picker选择器 <picker change"bindPickerChange" :value"index" :range"array"><view class"uni-input">{{array[index] || 打开第三方app }}</view></picker> 2.在data中定义好高德地图/百度地图…

STM32(一):安装环境

0、参考 STM32库开发实战指南——基于野火指南者开发板&#xff1a;https://doc.embedfire.com/mcu/stm32/f103zhinanzhe/std/zh/latest/index.htmlhttps://blog.csdn.net/m0_60227737/article/details/131890201https://blog.csdn.net/qq_44016222/article/details/138673090…

C++的异常处理机制

C的异常处理机制 (1)Why&#xff08;异常处理机制的作用&#xff09;(2)How&#xff08;异常机制如何工作&#xff09;A.抛出异常B.捕获异常C.处理异常D.传递异常 (3)抛出异常A.栈展开B.析构函数和异常C.异常对象 (4)捕获异常(4)处理异常A.构造函数的异常处理B.不抛出异常noexc…

【Oracle】Oracle数据库中的数据类型

目录 数值类型字符类型CHAR(size)&#xff1a;定长字符数据。VARCHAR2(size)&#xff1a;可变长字符数据LONG&#xff1a;可变长字符数据&#xff0c;最大可达到 2GNCHAR [( size )] 类型NVARCHAR2( size ) LOB类型&#xff08;二进制类型&#xff09;CLOB&#xff1a;字符数据…

Oracle各种连接写法介绍

1、左连接 左连接&#xff08;左外连接&#xff09;&#xff1a; 基表全部查出来&#xff0c;外连接表有的匹配&#xff0c;没有则为null&#xff1b; 记录数与基表的记录数相同&#xff0c;前提是where后未加条件过滤&#xff1b; 两种写法&#xff08;left join&#xff09…

中小学校园EasyCVR视频综合监管方案:构建安全、智能的校园环境

一、背景需求分析 随着科技的快速发展&#xff0c;校园安全问题日益受到社会各界的关注。尤其是在中小学校园中&#xff0c;学生的安全更是牵动着每一个家庭的心。为了更有效地保障学生的安全&#xff0c;提高校园安全管理水平&#xff0c;视频监控系统在中小学中的应用越来越…

伙伴活动|AI硬件大潮来袭,深圳的创客们在哪里?

「每一种硬件产品&#xff0c;都会被 GenAI 重新做一遍。」 分享一个社区伙伴「未来光锥」参与主办的活动。如果你同时对 AI 和硬件感兴趣&#xff0c;提到 maker 一词仍然会激动。推荐你参与这次活动。 AI 玩具Folotoy 的创始人、RTE 开发者社区成员王乐也将参与本次活动并分…

【C++进阶】C++中的IO流

目录 前言 1. C语言中的IO 2. 如何理解流 3. C中的IO流 3.1 C中的标准IO 3.2 C中的文件IO 4. stringstream 总结 前言 C语言中的I/O接口十分强大&#xff0c;但使用起来有些繁琐。好在C中的I/O方式为我们解决了这些问题&#xff0c;让数据的读写操作变得更加简洁和便捷; 在…

动手学深度学习(Pytorch版)代码实践 -循环神经网络-57长短期记忆网络(LSTM)

57长短期记忆网络&#xff08;LSTM&#xff09; 1.LSTM原理 LSTM是专为解决标准RNN的长时依赖问题而设计的。标准RNN在训练过程中&#xff0c;随着时间步的增加&#xff0c;梯度可能会消失或爆炸&#xff0c;导致模型难以学习和记忆长时间间隔的信息。LSTM通过引入一组称为门…

【卡尔曼滤波器】DR_CAN 2 学习笔记:_数据融合_协方差矩阵_状态空间方程_观测器问题

【卡尔曼滤波器】2_数学基础_数据融合_协方差矩阵_状态空间方程_观测器问题 非常重要1 数据融合 data fusion 有俩秤,各自有自己的正态分布:俩秤是相互独立的:俩秤都不准,但标准差都符合正态分布 正态分布又叫做高斯分布 向左、向右 都是2, 标准差是2覆盖了68.4 %的可能:…

开启HIVE中分区表支持中文字段

进入hive表&#xff1a; use hive; #修改hive database编码 alter database hive default character set utf8; #修改table编码 alter table PARTITIONS default character set utf8; alter table PARTITION_KEY_VALS default character set utf8; alter table SDS default cha…

机器学习和AI智能写作对未来文案编辑的影响

欢迎关注小知&#xff1a;知孤云出岫 目录 机器学习和AI智能写作对未来文案编辑的影响1. 简介2. AI智能写作工具的现状3. AI智能写作的优势3.1 提高效率3.2 降低成本3.3 数据驱动的个性化 4. AI智能写作的挑战4.1 创造力和独创性4.2 道德和伦理问题4.3 技术限制 5. 行业变化5.…

【排序 - 插入排序 和 希尔排序】

插入排序&#xff08;Insertion Sort&#xff09;是一种简单直观的排序算法&#xff0c;它的工作原理是逐步构建有序序列。在排序过程中&#xff0c;它将未排序的元素逐个插入到已排序的部分中&#xff0c;从而在每次插入时扩展已排序序列的长度。 原理介绍 插入排序的基本思…

RAG实践:ES混合搜索BM25+kNN(cosine)

1 缘起 最近在研究与应用混合搜索&#xff0c; 存储介质为ES&#xff0c;ES作为大佬牌数据库&#xff0c; 非常友好地支持关键词检索和向量检索&#xff0c; 当然&#xff0c;支持混合检索&#xff08;关键词检索向量检索&#xff09;&#xff0c; 是提升LLM响应质量RAG(Retri…

Ethercat这里的CRC是如何计算和使用的?

这里的CRC是如何计算和使用的? 非常好的问题。让我详细解释一下CRC在这个上下文中是如何计算和使用的&#xff1a; CRC 计算过程&#xff1a; a. 准备输入数据&#xff1a; 收集从开始标签到结束标签的所有字符&#xff08;不包括带Crc32属性的开始标签&#xff09;。将这些字…

Java 8革新:现代编程的全新标准与挑战

文章目录 一、方法引用二、接口默认方法三、接口静态方法四、集合遍历forEach()方法 一、方法引用 方法引用是Java 8中一种简化Lambda表达式的方式&#xff0c;通过直接引用现有方法来代替Lambda表达式。 方法引用使得代码更加简洁和易读&#xff0c;特别是在处理函数式接口时&…

Kotlin Class

普通 Class kotlin class TestClz {val name: String "hsw"val age: Int 18 }java public final class TestClz {NotNullprivate final String name "hsw";private final int age 18;NotNullpublic final String getName() {return this.name;}publ…

WPF-控件样式设置

1、控件样式设置 1.1、内嵌式为相同控件设置样式 <Window.Resources><Style TargetType"Button"><Setter Property"Background" Value"Yellow"></Setter><Setter Property"Width" Value"60"&g…