webpack相关知识点

一、webpack打包过程。

　　首先读取配置文件，确定入口文件及其依赖关系，然后，从入口文件开始，递归解析所有模块，通过相应的加载器（loaders）处理不同类型的文件内容，如Javascript、css等。接着，使用插件（plugins）执行额外的任务，如代码压缩、环境变量注入等。最后，将处理后的模块按照指定的格式合并成一个或多个打包文件，并输出到配置的目标目录。

二、webpack打包原理

      主要包括模块化打包、加载器机制、插件系统、依赖图构建和代码分割优化。Webpack 通过递归解析入口文件及其依赖关系，构建依赖图，使用加载器将不同类型的文件转换成模块，并通过插件系统扩展功能，最终通过代码分割和按需加载优化打包结果。

三、webpack配置多入口和单入口的区别

• 单入口文件：

  • 适合单页应用和小型项目。
  • 配置简单，入口文件单一。

• 多入口文件：

• 适合多页应用和大型项目。
• 配置灵活，可以定义多个入口文件。
• 输出文件名需要使用占位符 [name] 确保唯一。
• 考虑使用 splitChunks 提取公共代码，优化打包结果

四、说说Loader和Plugin的区别

定义：

• • loader 是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中
  • plugin 赋予了 webpack 各种灵活的功能，例如打包优化、资源管理、环境变量注入等，目的是解决 loader 无法实现的其他事

从整个运行时机上来看，如下图所示：

可以看到，两者在运行时机上的区别：

• • loader 运行在打包文件之前
  • plugins 在整个编译周期都起作用

在Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过Webpack提供的 API改变输出结果

对于loader，实质是一个转换器，将A文件进行编译形成B文件，操作的是文件，比如将A.scss或A.less转变为B.css，单纯的文件转换过程

五、说说webpack proxy工作原理？为什么能解决跨域?

　　webpack中提供服务器的工具为webpack-dev-server，里面proxy则是关于代理的配置，该属性为对象的形式，对象中每一个属性就是一个代理的规则匹配。proxy工作原理实质上是利用http-proxy-middleware 这个http代理中间件，实现请求转发给其他服务器。而服务器与服务器之间请求数据并不会存在跨域行为，跨域行为是浏览器安全策略限制。因此能实现本地跨域。

六、说说如何借助webpack来优化前端性能？

• JS代码压缩
• CSS代码压缩
• Html文件代码压缩
• 文件大小压缩
• 图片压缩
• Tree Shaking
• 代码分离
• 内联 chunk

七、如何提高webpack的构建速度？

• 优化 loader 配置
• 合理使用 resolve.extensions
• 优化 resolve.modules
• 优化 resolve.alias
• 使用 DLLPlugin 插件
• 使用 cache-loader
• terser 启动多线程
• 合理使用 sourceMap

八、你还用过其他哪些打包工具，和webpack比较有什么区别？（根据自己的实际经验作答）

vite，区别是：

1. 构建速度

• • Vite：

    • 利用原生ES模块，基于浏览器的原生支持进行开发，启动时间非常快。
    • 只在需要时编译代码（按需编译），大幅减少初始加载时间。
    • 热模块替换（HMR）速度非常快，因为它只需要重新请求被更改的模块。

  • Webpack：

    • 传统的打包工具，打包过程涉及将所有依赖模块转换成一个或多个bundle。
    • 初次构建时间较长，特别是对于大型项目。
    • HMR速度相对较慢，因为需要重新编译整个bundle。

2. 开发体验

• • Vite：

    • 提供极快的冷启动和热更新能力，开发体验更流畅。
    • 支持现代JavaScript语法和最新的浏览器特性。
    • 使用Rollup进行生产构建，输出高效的代码。

  • Webpack：

    • 配置和生态系统非常成熟，适应各种复杂需求。
    • 通过插件和加载器可以实现各种高级功能。
    • 对于新手来说，配置可能较为复杂，但灵活性很高。

3. 配置和生态系统

• • Vite：

    • 默认配置即开箱即用，非常适合快速开发和原型设计。
    • 插件系统基于Rollup，继承了Rollup的大量插件和功能。
    • 对Vue和React等框架有很好的支持，官方插件丰富。

  • Webpack：

    • 配置高度灵活，可以通过Loader和Plugin实现复杂的构建逻辑。
    • 拥有庞大的生态系统和社区支持，各种插件和加载器非常丰富。
    • 适用于各种类型的项目和需求，从简单到复杂都可以胜任。

4. 构建方式

• • Vite：

    • 开发时不进行预打包，直接使用原生ES模块在浏览器中加载。
    • 生产构建使用Rollup，按需打包，生成高效的代码。

  • Webpack：

    • 通过依赖图将所有资源打包成一个或多个bundle。
    • 支持代码分割、按需加载和Tree Shaking，优化打包输出。

5. 使用场景

• • Vite：

    • 非常适合现代化的前端项目，特别是使用Vue 3和React的项目。
    • 适合希望快速启动开发环境并且享受流畅开发体验的开发者。

  • Webpack：

    • 适合各种规模的项目，从简单的静态网站到复杂的单页应用。
    • 适合需要高度定制化和复杂构建需求的项目。

总结

• • Vite：以开发体验为主，提供极快的启动和热更新速度，适合现代化前端开发。
  • Webpack：功能强大、配置灵活、生态系统成熟，适合需要复杂构建需求的项目。