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

看了网上一个教程,作些记录,从头学习一下webpack~关于安装之类的就不介绍了,首先了解下核心概念。感受首先知道这些概念仍是挺重要的。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里定义的逻辑。web

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

相关文章
相关标签/搜索