webpack
约 863 字大约 3 分钟
2022-04-18
提问
- 对webpack的了解
- webpack的工作原理
- loader和plugin？ 有什么区别？
- 做过哪些webpack优化？
说明
一般来说， 面试中问及的webpack相关知识，如果是面向招写业务代码的， 能了解个webpack的原理和能做什么，就差不多够了。如果是面向招做基础设施的， 那么还需要了解 loader、 plugin等相关内容，以及如何写一个 loader/plugin， 还有就是如何做webpack优化这些，但做招基础设施又不仅仅只考擦webpack，更多还是对构建工具的整体理解。
webpack
webpack是一个用于 现代javascript应用程序的静态模块打包工具。
工作原理
- 读取
webpack的配置参数； - 启动
webpack, 创建compiler对象，开始解析项目； - 从入口文件
entry开始解析，并找到其导入的依赖模块，递归遍历分析，形成依赖关系树； - 对不同的文件类型资源的依赖模块文件，使用对应的
Loader进行转换，最终转为 webpack的有效模块； - 在编译过程中，
webpack通过 发布订阅模式，向外抛出一些hooks，webpack的Plugin通过监听各个hooks， 执行插件任务，扩展webpack的功能，干预输出结果。 - 根据 输出配置
output，将打包构建好的资源文件 输出。
loader
将其他类型的资源文件转换为 webpack能够处理的有效模块。
plugin
plugin是webpack的核心功能，其目的是在于解决loader无法解决的其他事上。
plugin可以在webpack访问到webpack的整个生命周期，并且可以访问到compile对象，以及当前编译过程对象 compilation, 这使得plugin拥有非常强大的能力。
loader和plugin的区别
loader仅能对其关联的模块类型进行解析转换，不能访问到webpack的整个生命周期
plugin是对webpack的扩展，可以访问到webpack整个生命周期。
webpack 优化
以下内容是针对 webpack@5 的优化方向建议：
构建流程分析
在进行优化前，首先要搞清楚有哪些地方出现了痛点，需要进行优化。
编译速度分析
借助
speed-measure-webpack-plugin插件，可以帮助我们获取插件、loader的耗时。 消耗时间比较长的，认为可以优化的，则放到优化计划中。打包体积分析
借助
webpack-bundle-analyzer插件，可以帮助我们获取打包后生成的bundle的体积中，各个模块的位置、体积等信息。
编译速度优化
配置缓存方案。
在webpack的配置文件中 声明 配置：
{ cache: { type: 'filesystem } },来启用对模块和chunk的持久缓存。 可以大幅度优化 二次启动构建速度、打包速度等。对使用的 loader，根据其作用，指定 include 或者 exclude，减少 loader的应用范围。
管理资源
使用 webpack5 内置的
asset/resource代替assets loader(如， url-loader、file-loader、raw-loader)。多进程打包编译
使用
thread-loader将耗时长的loader进行包装，放到其他的线程中进行处理。
打包体积优化
重复多次出现的模块，可以抽到共享chunk中，非首屏加载必须的模块，可以抽到异步chunk中。
（还有对各种资源进行压缩等）