Webpack 是一个模块打包器，可以分析各个模块的依赖关系，最终打包成静态文件（js、css、jpg）。

三大阶段：

初始化：启动构建，读取与合并配置参数，加载plugin,实例化Compiler
编译：从Entry出发，针对每个Module串行调用对应的Loader去翻译文件中的内容，再找到该Module依赖的Module，递归的进行编译处理
输出：将编译后的Module组合成Chunk,将Chunk转换成文件，输出到文件系统中

细节：

Webpack CLI 通过 yargs模块解析 CLI 参数，并转化为配置对象option（单入口：Object，多入口：Array），调用 webpack(option) 创建 compiler 对象。
如果有 option.plugin，则遍历调用plugin.apply()来注册 plugin，
判断是否开启了 watch，如果开启则调用 compiler.watch，否则调用 compiler.run，开始构建。
创建 Compilation 对象来收集全部资源和信息，然后触发 make 钩子。
make阶段从入口开始递归所有依赖，
每次遍历时调用对应Loader翻译文件中内容，然后生成AST，遍历AST找到下个依赖继续递归，
根据入口和模块之间关系组装chunk，输出到dist中的一个文件内。

在以上过程中，webpack会在特定的时间点（使用tapable模块）广播特定的事件，插件监听事件并执行相应的逻辑，并且插件可以调用webpack提供的api改变webpack的运行结果

其他

webpack中的loader是一个函数，主要为了实现源码的转换，所以loader函数会以源码作为参数，比如，将ES6转换为ES5，将less转换为css，然后再将css转换为js，以便能嵌入到html文件中。

plugin是一个类，类中有一个apply()方法，主要用于Plugin的安装，可以在其中监听一些来自编译器发出的事件，在合适的时机做一些事情。

解决循环依赖问题

Webpack 中将 require 替换为 webpack_require，会根据 moduleId 到 installedModules 找是否加载过，加载过则直接返回之前的 export，不会重复加载。

如何提高Webpack构建速度

1.优化loader配置

module.exports = {module: {rules: [{// 精确正则（如果项目源码中只有 js 文件就不要写成 /\.jsx?$/），提升正则表达式性能test: /\.js$/,// 开启缓存（babel-loader 支持缓存转换出的结果，通过 cacheDirectory 选项开启）use: ['babel-loader?cacheDirectory'],// 缩小搜索目录（只对项目根目录下的 src 目录中的文件采用 babel-loader）include: path.resolve(__dirname, 'src'),},]},
};

2.terser 启动多线程

module.exports = {optimization: {minimizer: [new TerserPlugin({parallel: true, // 启用多线程cache: true // 开启缓存（提升二次构建速度）}),],},
};

3.resolve.modules 配置绝对路径

module.exports = {resolve: {// 若不配置，则会依次查找./node_module、../node_modules，一层一层向上找，这显然效率不高。modules: [path.resolve(__dirname, "node_modules")]}
}

4.resolve.extensions自定义解析确定的扩展

extensions: [".js", ".json"]// 例如： import Index from 'index' 没有写后缀，webpack 会先去找 index.js 文件，在去找 index.json
// 减少无意义的查找

5.resolve.alias 配置别名路径

6.使用fast-sass-loader代替sass-loader

7.CDN加速

码字不易，觉得有帮助的小伙伴点个赞支持下~

扫描上方二维码关注我的订阅号~

Webpack 原理总结归纳面试相关推荐

Webpack原理与实践
简单了解了几个常用的插件,一般适合用于任何类型的项目,不管是否使用了框架.webpack为每个工作环节都预留了合适的钩子,扩展时只需要找到合适的时机去做合适的事情. 写在前面 webpack插件机制的 ...
【Java基础】HashMap原理及常见面试题目
HashMap是Java中最常用的类之一,使用它的时候,有很多小的细节需要大家注意.下面通过他的原理和一些面试题目进行讲解. Java7底层实现 java7中用 HashMap底层算法使用了数组加链表 ...
java流程控制原理与方法_1.从本质上看,计算机控制系统的工作原理可归纳为三个步骤,以下不属这三个步骤的是 ( )。_学小易找答案...
[单选题]下列语句序列执行后, i 的值是( ); int i =1 ; switch ( i ) { case 1: i++; case 2: i+=2; } [单选题]对于 while语句而言, ...
babel原理_手写webpack核心原理，再也不怕面试官问我webpack原理
手写webpack核心原理一.核心打包原理 1.1 打包的主要流程如下 1.2 具体细节二.基本准备工作三.获取模块内容四.分析模块五.收集依赖六.ES6转成ES5(AST) 七.递归获取 ...
深入剖析原理！Android面试你必须要知道的那些知识，吐血整理
前言我们程序员之所以担心35岁被裁员,是因为自己的经验和实力能力不符合,国内IT现状,大多数程序员都在外包公司工作,框架老化,代码就是为了完成任务而写,刚定好需求你做一半产品突然让你改需求--一切的 ...
spring 事务原理_Spring声明式事务处理的实现原理，来自面试官的穷追拷问
公众号[JavaQ]原创,专注分享Java基础原理分析.实战技术.微服务架构.分布式系统构建,诚邀点赞关注! 面试官:有如下代码场景,A类的a1方法没有标注@Transactional注解,a2方法标 ...
大白话说Java反射：入门、使用、原理，BAT 面试官如何面试
写在最前面,我总结出了很多互联网公司的面试题及答案,并整理成了文档,以及各种学习的进阶学习资料,免费分享给大家.扫码加微信好友进[程序员面试学习交流群],免费领取.也欢迎各位一起在群里探讨技术. 文章 ...
webpack原理和优化
Webpack打包原理 Webpack 的运行流程是一个串行的过程,从启动到结束会依次执行以下流程: 初始化参数:从配置文件和 Shell 语句中读取与合并参数,得出最终的参数: 开始编译:用上一步得 ...
@transactional注解原理_《Spring源码解析（十二）》深入理解Spring事务原理，告别面试一问三不知的尴尬...
本文将带领大家领略Spring事务的风采,Spring事务是我们在日常开发中经常会遇到的,也是各种大小面试中的高频题,希望通过本文,能让大家对Spring事务有个深入的了解,无论开发还是面试,都不会让 ...

Webpack 原理总结归纳面试