每日一问

发表于 | 更新于: | 分类于

[Q1] Loader和Plugin的区别是什么？

[A1]

  1. loader 用于加载某些资源文件，它是一个转换器，将A文件进行编译成B文件，比如：将A.less转换为A.css，单纯的文件转换过程。 因为webpack 本身只能打包commonjs规范的js文件，对于其他资源例如 css，图片，或者其他的语法集，比如 jsx，是没有办法加载的。 这就需要对应的loader将资源转化，加载进来。从字面意思也能看出，loader是用于加载的，它作用于一个个文件上，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中。

  2. 而plugin 用于扩展webpack的功能，是一个扩展器。它直接作用于 webpack，扩展了webpack本身的功能，针对的是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作（在webpack运行的生命周期中会广播出许多事件，plugin可以监听这些事件，在合适的时机通过webpack提供的API改变输出结果。）。当然loader也时变相的扩展了 webpack ，但是它只专注于转化文件这一个领域。而plugin的功能更加的丰富，而不仅局限于资源的加载。

[参考答案]

  1. 作用不同：
    Loader直译为”加载器”。Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。
    Plugin直译为”插件”。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。
  2. 用法不同：
    Loader在module.rules中配置，也就是说作为模块的解析规则而存在。 类型为数组，每一项都是一个Object，里面描述了对于什么类型的文件（test），使用什么加载(loader)和使用的参数（options）
    Plugin在plugins中单独配置。 类型为数组，每一项是一个plugin的实例，参数都通过构造函数传入。

[Q2] 请解释React中props和state的区别？

[A2]

  1. 共同点： props 和 state 都属于 react 数据接口，他们都可以决定组件的行为和状态
  2. 不同点：
    props 属于对外接口，state 属于对内接口，props 主要是父组件向子组件传递参数配置该组件，组件内部无法控制也无法修改。想要获取父组件的数据只能通过回调函数的形式（即在自组件中调用父组件的方法）。
    state 主要用于保存，控制，修改组件自身状态，你可以理解state是一个局部的，只能被组件自身控制的数据源。不能被外界获取和修改。我们可以通过this.setState更新数据，setState导致组件重新渲染。
    总之props是让外部对组件进行配置，state是让组件控制自己的状态

[Q3] 浏览器的本地存储(1)的cookie了解多少？

[A3]

  1. 含义：Cookie指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加密)。 cookie是服务端生成，客户端进行维护和存储。通过cookie,可以让服务器知道请求是来源哪个客户端，就可以进行客户端状态的维护，比如登陆后刷新，请求头就会携带登陆时response header中的set-cookie,Web服务器接到请求时也能读出cookie的值，根据cookie值的内容就可以判断和恢复一些用户的信息状态。也可以理解为，就是客户端用来存储数据的一种，以键值对的形式存在，既可以在客户端设置，也可以在服务器端设置，cookie会跟随任意HTTP请求一起发送。
  2. 缺点：
    • 大小最多只能存储4kb的数据（各浏览器之间略有不同），各浏览器的cookie每一个name=value的value值大概在4k，所以4k并不是一个域名下所有的cookie共享的，而是一个name的大小，此外很多浏览器对一个站点的cookie个数也是有限制的。
    • 不安全。
  3. 分类：
    • 会话cookie：没有设置有效时间的 cookie。只要关闭了浏览器，cookie 就会被销毁。
    • 永久cookie：cookie 被保存在文件中，在有效时间内可长期存在，浏览器重启或机器重启都可以再次读取到cookie。
  4. 应用场景：记住密码，下次自动登录；购物车功能；保存用户的偏好，比如网页的字体大小、背景色等；记录用户浏览数据，进行商品（广告）推荐；多个站点共享登录状态（同一住域名下多个子站点）

[参考答案]

Cookie最开始被设计出来其实并不是做本地存储的，而是为了弥补http在状态管理上的不足
http协议是一个无状态协议，客户端向服务器发请求，服务器返回响应，这次事件就完成了，但是下次发请求如何让服务端直到客户端是谁呢？在这个需求下就产生了Cookie

Cookie本质上就是浏览器里面存储的一个很小的文本文件，内部以键值对的方式来存储(在chrome开发者面版的Application这一栏可以看到)都会携带相同的Cookie，服务器拿Cookie进行解析，便能拿到客户端的状态 Cookie的作用就是用来做状态存储的，但是也有很多缺陷：

  1. 容量缺陷。Cookie的体积上限只有4KB，只能用来存储少量的信息
  2. 性能缺陷。Cookie紧跟域名，不管域名下面的某一个地址需不需要这个Cookie，请求都会携带上完整的Cookie，这样随着请求数的增多，其实会造成巨大的性能浪费的，因为请求携带了很多不必要的内容
  3. 安全缺陷。由于Cookie以纯文本的形式在浏览器和服务器中传递，很容易被非法用户截取，然后进行一系列的篡改，在Cookie的有限期内重新发送给服务器，这是很危险的。另外，在HttpOnly为false的情况下，Cookie信息能直接通过js脚本来读取。

[Q4] 浏览器的本地存储(2)的WebStorage了解多少

[A4]

html5中的Web Storage包括会话存储（sessionStorage）和本地存储（localStorage）。

localStore特点：

  • 保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。
  • 大小为5M左右
  • 仅在客户端使用，不和服务端进行通信
  • 接口封装较好

sessionStore特点：

  • 会话级别的浏览器存储
  • 大小为5M左右
  • 仅在客户端使用，不和服务端进行通信
  • 接口封装较好

作用域：localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。
应用场景：1.可以用它对表单信息进行维护，将表单信息存储存储在里面，可以保证页面即使刷新也不会让之前的表单信息丢失。2.可以用它存储本次浏览记录。如果关闭页面后不需要这些记录，用sessionStorage就再合适不过了。事实上微博采取这样的存储方式。

[Q5] 在css中link和@import的区别是什么？

[A5]

  1. 从属关系区别
    @import是 CSS 提供的语法规则，只有导入样式表的作用，import在html使用时候需要<style type="text/css">标签，同时可以直接@import url(CSS文件路径地址);放如css文件或css代码里引入其它css文件。；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
  2. 加载顺序区别
    加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
  3. 兼容性区别
    @import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
  4. DOM可控性区别
    可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
  5. 权重区别
    link和@import，谁写在后面，谁的样式就被应用，后面的样式覆盖前面的样式

[Q6] 常见的loader以及作用的总结？

[A6]

  1. babel-loader: 将ECMAScript2015+ 版本的代码转换为向后兼容的Javascript语法，以便运行在当前和旧版本的浏览器中。
  2. less-loader、sass-loader、stylus-loader：css预处理器，将他们编译为css语法；postcss-loader：自动配置样式前缀，兼容浏览器；css-loader: 解析css语法，处理css中的 @import 和 url 这样的外部资源；style-loader: 将样式插入到 DOM中，方法是在head中插入一个style标签，并把样式写入到这个标签的 innerHTML里。
  3. file-loader、url-loader: url-loader可以将满足条件(将比较小的图片，一般是小于8k)的图片转换为base64，缺点是转换后比之前大，好处是不用发送http请求；不满足条件的url-loader会自动调用file-loader来处理图片，会对图片进行打包，返回打包后的路径。

[参考答案]

  1. raw-loader：加载文件原始内容（utf-8）
  2. file-loader：把文件输出到一个文件夹中，在代码中通过相对URL去引用输出的文件
  3. url-loader:和file-loader类似，但是能在文件很小的情况下以base64的方式把文件内容注入到代码中
  4. source-map-loader:加载额外的Source Map文件，以方便断点调试
  5. svg-inline-loader：将压缩后的 SVG 内容注入代码中
  6. image-loader：加载并且压缩图片文件
  7. json-loader 加载 JSON 文件（默认包含）
  8. handlebars-loader: 将 Handlebars 模版编译成函数并返回
  9. babel-loader：把ES6转化成ES5
  10. ts-loader: 将 TypeScript 转换成 JavaScript
  11. awesome-typescript-loader：将 TypeScript 转换成 JavaScript，性能优于 ts-loader
  12. css-loader：加载css，支持模块化、压缩、文件导入等特性
  13. style-loader：把css代码注入到js中，通过DOM操作去加载css
  14. eslint-loader：通过ESLint检查JS代码
  15. tslint-loader：通过 TSLint检查 TypeScript 代码
  16. postcss-loader：扩展 CSS 语法，使用下一代 CSS，可以配合 autoprefixer 插件自动补齐 CSS3 前缀
  17. vue-loader：加载 Vue.js 单文件组件
  18. cache-loader: 可以在一些性能开销较大的 Loader 之前添加，目的是将结果缓存到磁盘里

[Q7] webpack中source map是什么？生产环境怎么用？

[A7]
概念：通常，js代码出错，控制台会提示第几行第几列代码出错。但是webpack打包压缩后的代码，都被压缩到了一行，变量也变成了a,b,c,d。代码出错，控制台就没法正确的提示错误位置。sourceMap就可以解决这个问题。sourceMap就是一个信息文件，里面储存着打包前的位置信息。也就是说，sourceMap 提供了源代码到最终生成代码间的映射关系，能够帮助开发者方便的定位源代码。出错的时候，浏览器控制台将直接显示原始代码出错的位置，而不是转换后的代码，点击出错信息将直接跳转到原始代码位置。
生成环境：webpack打包仍然生成sourceMap，但是将map文件挑出放到本地服务器，将不含有map文件的部署到服务器，借助第三方软件（例如fiddler），将浏览器对map文件的请求拦截到本地服务器，就可以实现本地sourceMap调试。

[基础理解SourceMap]
[相关文章2:]

对于生产环境的配置……….

[参考答案] source map是将编译、打包、压缩后的代码映射回源代码的过程。打包压缩后的代码不具备良好的可读性，想要调试源码就需要 soucre map。
map文件只要不打开开发者工具，浏览器是不会加载的

线上环境一般有三种处理方案：
hidden-source-map：借助第三方错误监控平台Sentry使用
nosources-source-map：只会显示具体行数以及查看源代码的错误栈。安全性比source map高
source：通过nginx设置将.map文件只对白名单开放(公司内网)
注意的是：避免在生产中使用 inline- 和 eval- ，因为它们会增加bundle体积大小，并降低整体性能。

[Q8] 浏览器缓存机制(1)对于开发很重要，强缓存的内容能了解多少呢？

[A8]
浏览器缓存是浏览器对之前请求过的文件进行缓存，以便下一次访问时重复使用，节省带宽，提高访问速度，降低服务器压力。
http缓存机制主要在http响应头中设定，响应头中相关字段为Expires、Cache-Control、Last-Modified、Etag。
强缓存：强缓存通过Expires和Cache-Control两种响应头实现，浏览器不会向服务器发送任何请求，直接从本地缓存中读取文件并返回Status Code: 200 OK

https://github.com/amandakelake/blog/issues/41

[参考答案]
强缓存： 浏览器中的缓存作用分为两个情况，一种是需要发送HTTP请求，一种是不需要发送 首先是检查强缓存，这个阶段不需要发送http请求 如何来检查呢？通过相应的字段来进行，但是说起这个字段就有意思啦 在http/1.0和http/1.1当中，这个字段是不一样的。在早期，也就是http/1.0时期，使用的是Expires，而http/1.1使用的是Cache-Contronl

Expires
Expries即过期的时间，存在于服务端返回的响应头中，告诉浏览器在这个过期时间之前可以直接从缓存里面获取数据，无需再次请求

Expires: Wed, 22 Nov 2020 08:30:00 GMT
表示资源在2020年11月22号8点30分过期，过期了就得向服务端发送请求
这个方式看上去没什么问题，合情合理，但其实潜藏了一个坑，那就是服务器的时间和浏览器的时间可能并不一致，那服务器返回的这个过期时间可能就是不准确的，因此这种方式很快在后来的http/1.1版本就抛弃了。
Cache-Control
在http1.1中，采用了一个非常关键的字段：Cache-Control。 它和Expires本质的不同在于它并没有采用具体的过期时间点这个方式，而是采用过期时长来控制缓存，对应的字段是max-age，比如这个例子：

Cache-Control:max-age=3600
代表这个响应返回后在3600秒，也就是一个小时之内可以直接使用缓存
如果你觉得它只有max-age一个属性的话，那就想错了
它其实可以组合非常多的指令，完成更多的场景的缓存判断，将一些关键的属性列举如下：
public：客户端和代理服务器都可以缓存。因为一个请求可能要经过不同的代理服务器最后才到达目标服务器，那么结果就是不仅仅浏览器可以缓存数据，中间的任何代理节点都可以进行缓存
private：只有浏览器能缓存，中间的代理服务器不能缓存
no-cache：跳过当前的强缓存，发送http请求，即直接进入协商缓存阶段
no-store：非常简单粗暴，不进行任何形式的缓存
s-maxage：这和max-age长得非常像，但是区别在于s-maxage是针对代理服务器的缓存时间。
值得注意的是：当Expires和Cache-Control同时存在的话，Cache-Control会优先考虑 还存在一种情况是：当资源缓存时间超时了，也就是强缓存失效了，接下就要进入第二部分–协商缓存

[Q9] react-router里的Link标签和a标签有什么区别？

[参考答案]
区别
从最终渲染的DOM来看，这两者都是链接，都是a标签，区别是： Link标签是react-router里实现路由跳转的链接，一般配合Route使用，react-router接下了其默认的链接跳转行为，区别于传统的页面跳转，Link标签的”跳转”行为只会触发相匹配的Route对应的页面内容更新，而不会刷新整个页面

Link标签做的三件事情：

1.有onclick那就执行onclick
2.click的时候阻止a标签默认事件
3.根据跳转href(即使是to)，用history(web前端路由两种方式之一，history&hash)跳转，此时只是链接变了，并没有刷新页面
而标签就是普通的超链接了，用于从当前页面跳转到href指向的里一个页面(非锚点情况)

a标签默认事件禁掉之后做了什么才实现了跳转？

1
2
3
4
5
6
let domArr=document.getElementByTagName('a');
[...domArr].forEach(item=>{
    item.addEventListener('click',function(){
        location.href=this.href
    })
})

[Q10] 能不能说一说XSS攻击？

[A10]
XSS的原理是：恶意攻击者在web页面中会插入一些恶意的script代码。当用户浏览该页面的时候，那么嵌入到web页面中script代码会执行，因此会达到恶意攻击用户的目的。
XSS攻击的危害包括
1、盗取各类用户帐号，如机器登录帐号、用户网银帐号、各类管理员帐号
2、控制企业数据，包括读取、篡改、添加、删除企业敏感数据的能力
3、盗窃企业重要的具有商业价值的资料
4、非法转账
5、强制发送电子邮件
6、网站挂马
7、控制受害者机器向其它网站发起攻击

[参考答案]
XSS全称是Cross Site Scripting[跨站脚本]，为了和css区分，故叫它xss。XSS攻击是指浏览器中执行恶意脚本(无论是跨域还是同域)，从而拿到用户的信息进行操作。

这些操作一般可以完成下面这些事情 1.窃取Cookie 2.监听用户行为，比如输入账号密码后直接发送到黑客服务器 3.修改DOM伪造登录表单 4.在页面中生成浮窗广告

通常情况下，XSS攻击的实现有三种方式 — 存储型、反射型和文档型。原理比较简单，一一介绍

存储型
存储型，将恶意脚本存储了起来，确实，存储型的XSS将脚本存储到了服务端的数据库，然后在客户端执行这些脚本，从而达到攻击的效果

常见的场景是留言评论区提交一段代码，如果前后端没有做好转义的工作，那评论内容存到了数据库，在页面渲染过程中直接执行，相当于执行一段位置逻辑的js代码，是非常恐怖的。这就是存储型的xss攻击

反射型
反射型xss指的是恶意脚本作为网络请求的一部分 比如我输入

http://baidu.com?q=<script>alert("你完蛋了")</script>
这样在服务端会拿到q参数，然后将内容返回给浏览器端，浏览器将这些内容作为HTML的一部分解析，发现是一个脚本，直接执行，这样被攻击了

之所以叫它反射型，是因为恶意脚本是通过作为网络请求的参数，经过服务器，然后在反射到HTML文档中，执行解析。和存储型不一样的是：服务器并不会存储这些恶意脚本

文档型
文档型的XSS攻击并不会经过服务端，而是作为中间人的角色，在数据传输过程劫持到网络数据包，然后修改里面的html文档 这样的劫持方式包括wifi路由劫持或者本地恶意软件等

防范措施
明白三种xss攻击的原理，发现一个共同点：都是让恶意脚本直接能在浏览器中执行 那么要防范它，就是要避免这些脚本代码的执行 为了完成这一点，必须做到一个信念，两个利用。

一个信念
千万不要相信任何用户的输入！ 无论是在前端和服务端，都要对用户的输入进行转码或过滤

如

<script>alert('你完了！')</script>
转码后变为：

<script>alert('你完蛋了')</script>
这样的代码在html解析的过程中是无法执行的 当然也可以利用关键词过滤的方式，将script标签给删除。那么现在的内容只剩下

什么都没有

利用CSP
CSP，即浏览器中的内容安全策略，它的核心思想就是服务器决定浏览器加载哪些资源，具体来说可以完成以下功能： 1.限制其他域下的资源加载 2.禁止向其他域提交数据 3.提供上报机制，能帮助我们及时发现XSS攻击

利用HttpOnly
很多XSS攻击脚本都是用来窃取Cookie，而设置Cookie的HttpOnly属性后，JavaScript便无法读取Cookie的值，这样也很好的防范XSS攻击。

总结
xss攻击是指浏览器中执行恶意脚本，然后拿到用户的信息进行操作。主要分为存储型、反射型和文档型。防范的措施包括：

一个信念：不要相信用户的输入，对输入的内容转码或者过滤，让其不可执行 两个利用:利用CSP,利用Cookie的HttpOnly属性

[Q11] 谈谈你对重绘和回流的理解？

[A11]

回流也叫重排。有以下的操作会触发回流:

  1. 一个 DOM 元素的几何属性变化，常见的几何属性有width、height、padding、margin、left、top、border 等等, 这个很好理解。
  2. 使 DOM 节点发生增减或者移动。
  3. 读写 offset族、scroll族和client族属性的时候，浏览器为了获取这些值，需要进行回流操作。
  4. 调用 window.getComputedStyle 方法。

当 DOM 的修改导致了样式的变化，并且没有影响几何属性的时候，会导致重绘(repaint)。

优化：减少重绘和重排：　　　

  1. 不要一条一条地修改 DOM 的样式。可以先定义好 css 的 class，然后修改 DOM 的 className。
  2. 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。
  3. 为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。
  4. 千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。
  5. 不要在布局信息改变的时候做查询（会导致渲染队列强制刷新）　　

[参考答案]
http://www.mamicode.com/info-detail-2890451.html

[Q12] 简单说下你理解的语义化，怎样来保证你写的符合语义化？HTML5语义化标签了解下？

[A12]

  1. HTML语义化：就是页面去掉样式或者加载失败的时候能够让页面呈现出清晰的结构。HTML5新增了好多语义化的标签，例如：header、footer、nav、menu、section、article等等，单单从字面上理解，就知道标签的含义。在写页面的时候，我们可以直接引用这些标签，不需要再用没有任何含义的div标签了，对于机器可以识别，对于开发人员很容易明白。这就是HTML语义化。

  2. 语义化的好处：
    1）为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构
    2）用户体验：例如title、alt用于解释名词
    3）有利于SEO：利于被搜索引擎收录，更便于搜索引擎的爬虫程序来识别
    4）方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页
    5）便于项目的开发及维护，使HTML代码更具有可读性

[参考答案]
很多时候我们写HTML，为了方便都会直接使用div和span标签，在通过class来确定具体样式。网站哪一部分为标题，哪一部分为导航，哪一部分为头部和尾部，都只能通过class来进行确定。 但是class命名规范却又没有一套统一的标准，依次导致很多时候无法确定整体网站的结构 因此，在HTML5出现后，添加了关于页面布局结构的新标签。而在html书写过程中，根据不同的内容使用合适的标签进行开发，即为语义化。

在编程中，语义指的是一段代码的含义(这个HTML的元素有什么作用，扮演了什么样的角色)。HTML语义元素清楚地向浏览器和开发者描述其意义，例如form、table以及img等

1.优点：对搜索引擎友好，有了良好的结构和语义，网页内容自然容易被搜索引擎抓取
2.HTML5新增语义元素 article aside details figcaption figure footer> header main mark nav section summary time
3.为什么要语义化？
语义化的优势主要在于以下几点：
其他开发者便于阅读代码，通过不同标签明白每个模块的作用和区别
结构明确、语义清晰的页面能有更好的用户体验，在样式(css)没有加载前也有较为明确的结构，更如img这一类的，在图片无法加载的情况下有alt标签告知用户此处图片的具体内容；
利于seo，语义化便于搜索引擎爬虫理解，和搜索引擎建立良好的沟通，能让爬虫爬取更多关键有效的信息
方便其他设备阅读(如屏幕阅读器，盲人设备和移动设备等)
4.如何语义化？
一般的网站分为头部、导航、文章(或其他模块)、侧栏、底部，根据不同的部位，使用不同的标签进行书写。
表示页面不同位置的标签：header、nav、article、section、footer、aside
表示具体元素的作用或者意义的标签：a、abbr、address、audio、blockquote、caption、code、datalist、del、detail、ol、ul、figure、figuration、img、input、mark、p等

  • 尽可能少的使用无语义的标签div和span
  • 在语义不明显时，既可以使用div或者p时，尽量用p，因为p在默认情况下有上下间距，对兼容特殊终端有利；
  • 不要使用纯样式标签，如b、font、u等，改用css设置
  • 需要强调的文本，可以包含在strong或者em标签中(浏览器预设样式，能用css指定就不用他们)，strong默认样式是加粗(不要加b)，em是斜体(不用i)
  • 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，，单元格用td
  • 表单域要用fieldset标签包起来，并用legend标签说明表单的用途
  • 每个input标签对应的说明文件都需要使用label标签。并且通过input设置为id属性，在label标签中设置for=someld来让说明文本和相对应的input关联起来

5.注意点： em、strong、dfn、code、samp、kbd、var、cite等，虽然这些标签定义的文本大多会呈现处特殊的样式，但实际上，这些标签都拥有确切的语义 我们并不反对使用它们，但是如果您只是为了达到某种视觉效果而使用这些标签的话，我们建议您可以使用样式表，那么做会达到更加丰富的效果。

[Q13] 常见的plugin以及作用的总结

[A13]

  1. clean-webpack-plugin 每次打包之前都清空dist目录下的文件
  2. html-webpack-plugin 配置打包生成的html，以哪个文件为模板、生成的html文件名、压缩配置等。
  3. mini-css-extract-plugin 抽离css样式，压缩配置
  4. speed-measure-webpack-plugin 费时分析，可以查看打包、构建速度，很好的优化分析工具
  5. optimize-css-assets-webpack-plugin css压缩
  6. terser-webpack-plugin js压缩，配置drop_console: true 去掉所有console.log输出
  7. @sentry/webpack-plugin 配置Sentry服务
  8. new webpack.HotModuleReplacementPlugin() 模块热替换
  9. webpack-bundle-analyzer: 可视化 Webpack 输出文件的体积 (业务组件、依赖第三方模块) 分析工具

[参考答案]

  1. define-plugin：定义环境变量(Webpack4 之后指定 mode 会自动配置)
  2. ignore-plugin：忽略部分文件
  3. commons-chunk-plugin：提取公共代码
  4. webpack-parallel-uglify-plugin: 多进程执行代码压缩，提升构建速度
  5. serviceworker-webpack-plugin：为网页应用增加离线缓存功能
  6. ModuleConcatenationPlugin: 开启 Scope Hoisting