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

深入浅出webpack学习(1)--核心概念

看了网上一个教程,做些记录,从头学习一下webpack~关于安装之类的就不介绍了,首先了解下核心概念。感觉首先知道这些概念还是挺重要的。

核心概念

  • Entry:入口,webpack执行构建的第一步从Entry开始,可以抽象成输入。
  • Module:模块,在webpack中一切皆模块,一个模块对应着一个文件,webpack会从配置的Entry开始递归找出所有依赖的模块。
  • Chunk:代码块,一个Chunk由多个模块组合而成,用于代码合并和分割。
  • Loader:模块转换器,用于把模块原内容按照需求转换成新内容。
  • Plugin:扩展插件,在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
  • Output:输出结果,在webpack经过一系列处理并得出最终想要的代码后输出结果。

webpack会在启动后从Entry里配置的Module开始递归解析Entry依赖的所有Module,每找到一个Module,就会根据配置的loader去找对应的转换规则,对Module进行转换后,再解析出当前Module依赖的Module。这些模块会以Entry为单位进行分组,一个Entry和其他所有依赖的Module被分到一个组就是一个Chunk。最后webpack会把所有Chunk转换成文件输出。在整个流程中webpack会在恰当的时机执行Plugin里定义的逻辑。

在实际开发中可能会遇到不同的场景,了解上面大致流程,在以后的开发中就会清楚的知道在对应的位置进行配置。

相关文章:

  • Js基础知识(一) - 变量
  • Linux常用命令大全 (非常有用)
  • 配置karma支持Chrome浏览器
  • Java程序员升职加薪必备技术——分布式
  • unity探索者之微信登录,非第三方插件
  • json 解析豆瓣ApiURL
  • mongodb数据备份脚本和日志切割脚本
  • 资讯丨Linux基金会一行到访腾讯参观交流
  • 《设计模式之禅》--代理扩展:动态代理
  • IOLI-crackme0x01-0x05 writeup
  • 思考|自动化测试面试题第一波
  • 算法学习之路|欧拉回路初见
  • python3 _笨方法学Python_日记_DAY1
  • 猫头鹰的深夜翻译:JDK9 NotNullOrElse方法
  • 提高开发效率之VS Code基础配置篇
  • [分享]iOS开发-关于在xcode中引用文件夹右边出现问号的解决办法
  • centos安装java运行环境jdk+tomcat
  • codis proxy处理流程
  • es6要点
  • Java到底能干嘛?
  • Js实现点击查看全文(类似今日头条、知乎日报效果)
  • Linux快速配置 VIM 实现语法高亮 补全 缩进等功能
  • maya建模与骨骼动画快速实现人工鱼
  • ReactNativeweexDeviceOne对比
  • Redis的resp协议
  • SpiderData 2019年2月16日 DApp数据排行榜
  • Unix命令
  • 计算机在识别图像时“看到”了什么?
  • 利用阿里云 OSS 搭建私有 Docker 仓库
  • 七牛云 DV OV EV SSL 证书上线,限时折扣低至 6.75 折!
  • 前端相关框架总和
  • 深入 Nginx 之配置篇
  • 算法-图和图算法
  • 写给高年级小学生看的《Bash 指南》
  • 东超科技获得千万级Pre-A轮融资,投资方为中科创星 ...
  • ​LeetCode解法汇总2583. 二叉树中的第 K 大层和
  • #define
  • #pragma once与条件编译
  • $refs 、$nextTic、动态组件、name的使用
  • (04)Hive的相关概念——order by 、sort by、distribute by 、cluster by
  • (aiohttp-asyncio-FFmpeg-Docker-SRS)实现异步摄像头转码服务器
  • (Redis使用系列) Springboot 使用redis实现接口Api限流 十
  • (solr系列:一)使用tomcat部署solr服务
  • (非本人原创)我们工作到底是为了什么?​——HP大中华区总裁孙振耀退休感言(r4笔记第60天)...
  • (附源码)springboot课程在线考试系统 毕业设计 655127
  • (原創) 如何讓IE7按第二次Ctrl + Tab時,回到原來的索引標籤? (Web) (IE) (OS) (Windows)...
  • (转)视频码率,帧率和分辨率的联系与区别
  • (转载)PyTorch代码规范最佳实践和样式指南
  • .net core使用ef 6
  • .NET应用架构设计:原则、模式与实践 目录预览
  • /boot 内存空间不够
  • @ConditionalOnProperty注解使用说明
  • @TableId注解详细介绍 mybaits 实体类主键注解
  • [ 数据结构 - C++]红黑树RBTree
  • [ 隧道技术 ] cpolar 工具详解之将内网端口映射到公网