• Entry：配置模块的入口。
• Output：配置如何输出最终想要的代码。
• Module：配置处理模块的规则。
• Resolve：配置寻找模块的规则。
• 其他配置项：其他零散的配置项。
• 整体配置解构：整体地描述各配置项的结构。
• 多种配置类型：配置文件不止可以返回一个Object，还可以返回其他形式。
• 配置总结：寻找配置Webpack的规律，减少思维负担。

entry是配置模块的入口，可抽象成输入，Webpack执行构建的第一步将从 入口开始，搜寻及递归解析出所有入口依赖的模块。（必填）

Webpack在寻找相对路径的文件时会以context为根目录，context默认为执行启动Webpack时所在的当前工作目录。如果想改变context的默认配置，则可以在配置文件时设置：

这时发布到线上的HTML在引入JavaScript文件时就需要以下配置项：

• // 导出库的名称，为string类型 // 不填它时，默认的输出格式是匿名的立即执行函数 // 导出库的类型，为枚举类型，默认是var // 是否包含有用的文件路径信息到生成的代码里，为boolean类型 // JSONP异步加载资源时的回调函数名称，需要和服务端搭配使用 // 浏览器开发者工具里显示的源码模块名称 // 异步加载跨域的资源时使用的方式 use: [ // 使用哪些Loader，有先后次序，从后向前执行 // 配置寻找模块的规则 alias: { // 模块别名配置，用于映射模块 // 输出文件的性能检查配置 // 配置输出代码的运行环境 profile: true, // 是否捕捉Webpack构建的性能信息，用于分析是什么原因导致构建性能不佳 //不监听的文件或文件夹，支持正则匹配，默认为空 // 监听到变化发生后，等300ms在执行动作，截流，防止文件更新太快导致重新编译频率太快，默认为300ms // 不停地询问系统指定的文件有没有发生变化，默认每秒询问1000次

  除了通过导出一个Object来描述Webpack所需的配置，还有其他更灵活的方式，以简化不同场景的配置。下面来一一介绍它们。

  1. 在大多数时候，我们需要从同一份源代码中构建出多份代码，例如一份用于开发，一份用于发布到线上。
     如果采用导出一个Object来描述Webpack所需配置的方法，则需要写两个文件，一个用于开发环境，一个用于线上环境。再启动时通过webpack --config webpack.config.js指定使用哪个配置文件。
     采用导出一个Function的方式，能通过JavaScript灵活地控制配置，做到只用写一个配置文件就能完成以上要求。
     导出一个Function的使用方式如下：

     // 在生成环境中才压缩

     在运行Webpack时，会向这个函数传入两个参数，如下所述。

     就以上配置文件而言，在开发时执行命令webpack构建出方便调试的代码，在需要构建出发布到线上的代码时执行webpack --env.production构建出压缩的代码。

• 导出一个返回Promise函数
  在某些情况下不能以同步的方式返回一个描述配置的Object，Webpack还支持导出一个返回Promise的函数，使用如下：

除了导出一份配置，Webpack还支持导出一个数组，数组中可以包含每份配置且每份配置都会执行一遍构建。
注意，Webpack从3.1.0版本才开始支持该特性。
使用如下： // 采用函数描述的一份配置 // 采用异步函数描述的一份配置 ]以上配置会导致Webpack针对这三份配置执行三次不同的构建。
这特别适合用Webpack构建一个要上传到Npm仓库的库，因为库中可能需要包含多种模块化格式的代码，例如CommonJS、UMD。

从前面的配置看有很多选项，Webpack内置了很多功能，我们不必都记住它们，只需要大概明白Webpack原理和核心概念，并判断选项大致属于哪个大模块下，再去查详细的使用文档即可。
通常我们可用如下经验去判断如何配置Webpack：

• 若想让源文件加入构建流程中被Webpack控制，则配置entry；
• 若想自定义输出文件的位置和名称，则配置output；
• 若想自定义寻找依赖模块时的策略，则配置resolve；
• 若想自定义解析和转换文件的策略，则配置module，通常是配置module.rules里的Loader；
• 若其他大部分需求可能通过Plugin去实现，则配置plugin。

此篇为本人Webpack学习笔记，来源《深入浅出Webpack》

题 1 ：什么是防抖和节流？有什么区别？如何实现？

防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

思路：每次触发事件时都取消之前的延时调用方法

节流：高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率

思路：每次触发事件时都判断当前是否有等待执行的延时函数

题 2 ：get请求传参长度的误区、get和post请求在缓存方面的区别

误区：我们经常说get请求参数的大小存在限制，而post请求的参数大小是无限制的。

实际上 HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对 get 请求参数的限制是来源与浏览器或 web 服务器，浏览器或 web 服务器限制了 url 的长度。为了明确这个概念，我们必须再次强调下面几点:

• GET 的最大长度显示是因为浏览器和 web 服务器限制了 URI 的长度

• 不同的浏览器和 WEB 服务器，限制的最大长度不一样

补充补充一个 get 和 post 在缓存方面的区别：

• get 请求类似于查找的过程，用户获取数据，可以不用每次都与数据库连接，所以可以使用缓存。

• post 不同，post 做的一般是修改和删除的工作，所以必须与数据库交互，所以不能使用缓存。因此 get 请求适合于请求缓存。

题 3：模块化发展历程

1. 服务器向客户端发送公钥。

2. 攻击者截获公钥，保留在自己手上。

3. 然后攻击者自己生成一个【伪造的】公钥，发给客户端。

4. 客户端收到伪造的公钥后，生成加密hash值发给服务器。

5. 攻击者获得加密hash值，用自己的私钥解密获得真秘钥。

6. 同时生成假的加密hash值，发给服务器。

7. 服务器用私钥解密获得假秘钥。

8. 服务器用加秘钥加密传输信息

防范方法：服务端在发送浏览器的公钥中加入 CA 证书，浏览器可以验证 CA 证书的有效性。

题 17：说几条 Web 前端优化策略

(2) 从设计实现层面简化页面

(4) 资源合并与压缩

题 18：你了解的浏览器的重绘和回流导致的性能问题

重绘和回流是渲染步骤中的一小节，但是这两个步骤对于性能影响很大。

• 重绘是当节点需要更改外观而不会影响布局的，比如改变 color就叫称为重绘

• 回流是布局或者几何属性需要改变就称为回流。

回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变深层次的节点很可能导致父节点的一系列回流。

所以以下几个动作可能会导致性能问题：

很多人不知道的是，重绘和回流其实和 Event loop 有关。

1. 判断是否有全屏操作事件

2. 执行 IntersectionObserver回调，该方法用于判断元素是否可见，可以用于懒加载上，但是兼容性不好

3. 以上就是一帧中可能会做的事情。如果在一帧中有空闲时间，就会去执行 requestIdleCallback回调。

• 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量

• 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局

• 动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用 requestAnimationFrame

• CSS 选择符从右往左匹配查找，避免 DOM 深度过深

• 将频繁运行的动画变为图层，图层能够阻止该节点回流影响别的元素。比如对于 video标签，浏览器会自动将该节点变为图层。

题 19：写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？

vue 和 react 都是采用 diff 算法来对比新旧虚拟节点，从而更新节点。在 vue 的 diff函数中（建议先了解一下 diff 算法过程）。

在交叉对比中，当新节点跟旧节点头尾交叉对比没有结果时，会根据新节点的 key 去对比旧节点数组中的 key，从而找到相应旧节点（这里对应的是一个 key => index 的 map 映射）。如果没找到就认为是一个新增节点。而如果没有 key，那么就会采用遍历查找的方式去找到对应的旧节点。一种一个 map 映射，另一种是遍历查找。相比而言，map

题 20：React 中 setState 什么时候是同步的，什么时候是异步的？

题 21：为什么虚拟 dom 会提高性能？

虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。

1. 用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中。

2. 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异。

把 2 所记录的差异应用到步骤 1 所构建的真正的DOM树上，视图就更新了。

题 22：清除浮动的方式有哪些？比较好的是哪一种？

比较好是 .clearfix，伪元素万金油版本，后两者有局限性。

clear:both：若是用在同一个容器内相邻元素上,那是贼好的,有时候在容器外就有些问题了, 比如相邻容器的包裹层元素塌陷

overflow:hidden：这种若是用在同个容器内,可以形成 BFC避免浮动造成的元素塌陷

display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击，

visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击
opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击

display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。

联系：它们都能让元素不可见

概念：将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。

1. 减少 HTTP 请求数，极大地提高页面加载速度

2. 增加图片信息重复度，提高压缩比，减少图片大小

3. 更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现

1. 维护麻烦，修改一个图片可能需要重新布局整个图片，样式

1. link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC

2. 浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式

3. @import必须在样式规则之前，可以在 css 文件中引用其他文件

题 26：容器包含若干浮动元素时如何清理浮动

1. 容器元素闭合标签前添加额外元素并设置clear: both

2. 父元素触发块级格式化上下文(见块级可视化上下文部分)

3. 设置容器元素伪元素进行清理推荐的清理浮动方法

1. 否则，如果 float 不是 none，框是浮动的，display 根据下表进行调整。

2. 否则，如果元素是根元素，display 根据下表进行调整。

3. 其他情况下 display 的值为指定值 总结起来：绝对定位、浮动、根元素都需要调整display。

题 28：JS 的四种设计模式

工厂模式：简单的工厂模式可以理解为解决多个相似的问题；

单例模式：只能被实例化(构造函数给实例添加属性与方法)一次；

沙箱模式：将一些函数放到自执行函数里面，但要用闭包暴露接口，用变量接收暴露的接口，再调用里面的值，否则无法使用里面的值；

发布者订阅模式：就例如如我们关注了某一个公众号,然后他对应的有新的消息就会给你推送，代码实现逻辑是用数组存储订阅者, 发布者回调函数里面通知的方式是遍历订阅者数组,并将发布者内容传入订阅者数组。

题 29：下面代码的输出是什么?

所有对象键（不包括Symbols）都会被存储为字符串，即使你没有给定字符串类型的键。这就是为什么obj.hasOwnProperty（'1'）也返回true。

上面的说法不适用于Set。在我们的Set中没有“1”：set.has（'1'）返回false。它有数字类型1，set.has（1）返回true。

题 30：下面代码的输出是什么？

这题考察的是对象的键名的转换。

• 对象的键名只能是字符串和 Symbol 类型。

• 其他类型的键名会被转换成字符串类型。

• 对象转字符串默认会调用 toString 方法。