Webpack

1. 说一下对webpack的理解

1. 描述：webpack是一个打包、编译、压缩工具，运行在nodejs之上，可以将css、html、图片等所有资源转换成js文件，把所有的js文件再进行编译、压缩，打包成一个一个的模块，供程序使用。
2. 原理理解：webpack只是搭了一个框架，抛出了一些钩子，我们再使用一些官方和社区提供的loader、plugin，按照它的规范去做配置
3. tree-shaking：tree-shaking是建立在ES6的基础上，利用import、export这种静态导入导出，对文件进行静态解析，去除掉没有用到的导入文件

2. 为什么webpack打包慢？为什么vite会比webpack快？如果想提高webpack速度，应该怎么做？

1. 构建时长主要是集中在打包和编译，因为它们需要去遍历树以替换字符或者说是转换语法，因此需要经历“转换AST -> 遍历树 -> 转换回代码”这一过程

2. 为什么选 Vite

   1. 依赖：

      1. 目前在开发环境使用esbuild预构建依赖，esbuild使用Go编写，运行速度比纯javascript快10-100倍。
      2. 在生产环境使用rollup打包
      3. 因为esbuild还有一些重要的功能在开发阶段，比如代码分割和css处理。就目前来说，rollup在这些方面更加灵活

   2. 源码：Vite 以 原生 ESM 方式提供源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。

3. 参考：Webpack优化——将你的构建效率提速翻倍

   1. speed-measure-webpack-plugin构建打点，它能够测量出在你的构建过程中，每一个 Loader 和 Plugin 的执行时长
   2. 缓存：cache-loader
   3. 多核：happypack

3. webpack中plugin和laoder的区别，它们的执行时机

	区别	执行顺序
plugin	是一个扩展器，它丰富了webpack的功能，针对的是loader结束后，webpack打包的整个过程，它不是直接操作文件，而是基于时间机制工作，它会监听webpack打包过程中的某些节点，执行任务。比如文件的优化，资源管理，变量注入
loader	是一个转换器，将A文件编译成B文件，比如将less文件编译成css文件。也就是将非js文件转换成js文件	从右往左。因为webpack采用的是compose方式

4. 常见的loader及其功能

css-loader	解析css文件中的@import和url语句，处理css-modules，并将结果作为一个js模块返回。
style-loader
postcss-loader
sass-loader

5. 常见的plugin及其功能

html-webpack-plugin	会在打包后自动生成一个 html 文件，并且会将打包后的 js 文件引入到html 文件内。
clean-webpack-plugin	每次打包前都将旧生成的文件删除。
mini-css-extract-plugin	将写入 style 标签内的 css 抽离成一个 用 link 导入 生成的 CSS 文件

写在最后

---

往期文章

前端面经整理系列一（javascript篇）

前端面经整理系列二（css篇）

前端面经整理系列三（框架通识篇）

前端面经整理系列四（Vue篇）