webpack核心概念
2020-09-21 10:55:01 1 举报
AI智能生成
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插件的优化任务
0 条评论
下一页