面试官：讲一讲webpack？

面试经常问这种开放问题，没有具体答案，面试官主要是看看你对webpack的理解，原文太多太长我们又背不下来，通常回答无从下手，个人整理，方便记忆和理解，最重要初识要够精简：

逻辑：

1、先回答webpack是什么？作用？

webpack是一个静态模块打包工具，可以让前端项目工程化；也可以进行分模块打包

追问分包：分包可以减少代码体积，加快资源加载速度；分包可以更好地利用缓存

追问分包的考量标准：

要被分割出的代码块的最小尺寸

分割的代码块需要被引用的最小次数

一个入口模块或一个异步加载模块的最大并行请求数量

2、记住webpack四大核心：这四大是不能少了

• 入口(entry) 入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。每个依赖项随即被处理,最后输出到称之为 bundles 的文件中

• 输出(output) output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist。基本上,整个应用程序结构,都会被编译到你指定的输出路径的文件夹中

• 加载器(loader) oader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。本质上,webpack loader 将所有类型的文件,转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块

• 插件(plugins) loader 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务

3、webpack的构建过程：最好能理解后能背下来，面试官会比较满意，再继续往下追问就没意思了

1. Webpack CLI 启动打包流程，解析配置项参数；

2. 载入 Webpack 核心模块，创建 Compiler 对象；（Compiler==编译器）

3. 调用和配置所有的Loader（加载器）和注册plugins（插件）

4. 使用 Compiler 对象开始编译整个项目；

5. 从入口文件开始，解析模块为AST，分析模块依赖，形成依赖关系树；

6. 递归依赖树，将每个模块交给对应的 Loader 处理；

7. 合并 Loader 处理完的结果，将打包结果输出到 dist 目录。

---------------------来自灵题库流程+作者小改解释，结合webpack四大核心来记忆，还是可以大概背下来的

​

编辑切换为居中

来自知乎倒带人生：https://zhuanlan.zhihu.com/p/437480359

以上的三点是重中之重，怎么也得理解后说清楚，内容也刚好能说2分钟左右，不多不少再往下追问的就靠日常使用记忆以及进阶的，webpack的配置其实大多时候就是建立项目的时候用，很多都需要去查去看才能做，一般情况下不会再往下追问的

再往下追问，就真的要靠你自己的理解了，不是看两个文章能记得住的，比如怎么自己写loader和plugin

常见的Loader

• file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件

• url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去

• source-map-loader：加载额外的 Source Map 文件，以方便断点调试

• image-loader：加载并且压缩图片文件

• babel-loader：把 ES6 转换成 ES5

• css-loader：加载 CSS，支持模块化、压缩、文件导入等特性 子主题 1 子主题 2 子主题 3

• style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。

• eslint-loader：通过 ESLint 检查 JavaScript 代码

常见的Plugin

• define-plugin：定义环境变量

• html-webpack-plugin：简化html文件创建

• uglifyjs-webpack-plugin：通过UglifyES压缩ES6代码

• webpack-parallel-uglify-plugin: 多核压缩,提高压缩速度

• webpack-bundle-analyzer: 可视化webpack输出文件的体积

• mini-css-extract-plugin: CSS提取到单独的文件中,支持按需加载