webpack执行流程

webpack在启动时会从entry入口里配置的module模块开始，递归解析出entry依赖的所有module模块，每找到一个module模块，就会根据配置的loader去找出相应的转换规则，对module模块进行转换后，再解析找出module中所依赖的module，这些模块以entry为一个单位进行分组，一个entry及其所依赖的module被分到一个组也就是chunk（代码块），最后webpack会将所有的chunk转换成文件输出，在整个流程中，webpack会在恰当的时机执行plugin里定义的逻辑。

webpack中六个核心概念

  • Entry：入口webpack执行构建的第一步将从entry开始
  • Module： 模块，一个模块对应一个文件，webpack会从entry中配置的模块递归找出所有依赖的模块
  • Chunk： 代码块，一个entry为一个分组，entry及其所有依赖的模块为一个chunk，用于代码合并与分割
  • Loader： 模块转换器，用于将模块的内容按照需求转换成新内容
  • Plugin： 扩展插件，在webpack构建流程中的恰当时机注入扩展逻辑，来改变构建结果或做我们想要的事情
  • Output：输出结果，在webpack经过一系列处理并得出最终想要的代码后输出结果

    Webpack中的module,chunk,bundle究竟是什么

  1. module（模块）

在webpack中，一切皆模块，即：js文件、css文件、字体、图片资源等。

  1. chunk（块）

  2. bundle（最终产物）