webpack核心概念

2020-09-21 10:55:01   1  举报





AI智能生成

webpack核心概念

webpack

webpack 配置

模版推荐

作者其他创作

大纲/内容

Entry（入口配置）

指定了模块的入口，它让源文件加入构建流程中被webpack控制

SPA（单页面入口配置）

MPA（多页面入口配置）

Output（出口配置）

将所有资源打包在一起，仍然告诉webpack在哪里打包我们的应用，即将打包资源输出到什么地方

可指定输出路径和输出文件名

多入口配置对应多出口文件，可以用占位符[name]来配置

Module（模块）

模块，在Webpack中一切皆模块，一个模块即为一个文件。Webpack会从Entry开始递归找出所有的依赖模块

Chunk（代码块）

代码块，一个Chunk由多个模块组合而成，它用于代码合并与分割

Loader（模块加载器）

Loader用于对模块文件进行编译转换和加载处理，在module.rules数组中进行配置，它用于告诉Webpack在遇到哪些文件时使用哪些Loader去加载和转换

识别出应该被特定的加载器转换的文件

转换能够被添加到依赖图表的文件（并且最终打包）

Plugin（扩展插件）

扩展插件，在Webpack构建过程的特定时机注入扩展逻辑，用来改变或优化构建结果

构建流程

Webpack在启动后，会从Entry开始，递归解析Entry依赖的所有Module，每找到一个Module，就会根据Module.rules里配置的Loader规则进行相应的转换处理，对Module进行转换后，再解析出当前Module依赖的Module，这些Module会以Entry为单位进行分组，即为一个Chunk。因此一个Chunk，就是一个Entry及其所有依赖的Module合并的结果。最后Webpack会将所有的Chunk转换成文件输出Output。在整个构建流程中，Webpack会在恰当的时机执行Plugin里定义的逻辑，从而完成Plugin插件的优化任务