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

逆变苔原
• 阅读 3845

看了网上一个教程,做些记录,从头学习一下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里定义的逻辑。

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

点赞
收藏
评论区
推荐文章
代码哈士奇 代码哈士奇
4年前
webpack5构建一个简单的vue项目 (练习)
webpack5构建vue必要环境安装ndejs我们需要安装node如果没有安装则安装安装过则跳过执行nodevnpmv初始化项目文件夹新建一个空的项目执行npminity初始化npminity会生成一个package.json安装webpack以及htmlwebpackplugin控制台执行npmiwebpackwebpackcliwebpackdevserverhtmlwebpackpluginD安装babelloaderbabel可以将我们的代码向下
晴空闲云 晴空闲云
4年前
webpack配置typescript详解
随着现在typescript使用越来越多,作为打包工具界的webpack怎么编译typescript呢?下面我把自己的实践记录一下,成功编译了typescript文件,并且引入typescript模块后,也可以成功编译。我们从新建webpack项目开始,在此之前先贴一下环境,经常环境不同会造成不同的状况,这边先贴上的环境:$nodevv14.15.4$
Easter79 Easter79
4年前
vue iview element
首先安装babelpolyfillnpminstallbabelpolyfillsavedev入口文件引用,在main.js中引用import'babelpolyfill'配置文件webpack.base.conf.js修改entry:{app:'./src/main.j
皮卡皮卡皮 皮卡皮卡皮
4年前
webpack 基本配置
概念本质上,webpack是一个现代JavaScript应用程序的静态模块打包器(modulebundler)。当webpack处理应用程序时,它会递归地构建一个依赖关系图(dependencygraph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle。安装确保安装了nodejs项目文件环境cd
徐小夕 徐小夕
5年前
用 webpack 4.0 撸单页/多页脚手架 (jquery, react, vue, typescript)
1.导语        首先来简单介绍一下webpack:现代JavaScr
Easter79 Easter79
4年前
TypeScript 文件引入 Html (ts import html webpack)
我们的目标是把html引入ts文件,webpack打包时就能把html打进js文件,减少文件加载啦1安装textloadernpminstalltextloadersavedev2webpack配置里新增textloader为文本加载器module:{rules:
Stella981 Stella981
4年前
IE9样式错乱,IE11无法正常加载v
1.第一步:安装babelployfill(已安装请跳过此步骤)yarnaddbabelployfill2.修改webpack打包配置文件:webpack.bash.conf.js//引入babelployfillvarbabelPloy
Stella981 Stella981
4年前
RabbitMQ 的核心概念,看了必懂!
作者:海向出处:cnblogs.com/haixiang/p/10853467.htmlRabbitMQ特点RabbitMQ相较于其他消息队列,有一系列防止消息丢失的措施,拥有强悍的高可用性能,它的吞吐量可能没有其他消息队列大,但是其消息的保障性出类拔萃,被广泛用于金融类业务。AMQP协议A