webpack由于历史包袱导致复杂,只要把握关键流程即可
构建工具对比
- webpack :可以打包任何资源,配置略复杂,适合项目开发
- rollup:基于 ESM的,一般用来打包类库
- vite:打包是基于rollup,dev模式启动快,基于ESM,按需加载,使用ESbuild编译
- glup:基于任务流的自动构建工具
Webpeck 构建流程⭐
- 初始化参数,从配置文件和命令行中读取
- 开始编译,初始化 complier 对象,加载插件,开始编译
- 编译模块,从入口文件出发,递归依赖的模块,通过对应的 loader 进行加载编译
- 编译完成后,根据入口和模块之间的依赖关系组装成 chunk,生成代码,最后输出 bundle
webpack 会在特定的时间点广播事件,触发所监听事件的插件执行特定的逻辑。
什么是Tapable
webpack本质上是一种事件流的机制,compiler 和 complation 都是基于 Tapable 实现的,Tapable 是一种发布订阅的事件系统。
Tapable 提供了很多类型的hook,分为同步和异步两大类(异步中又区分异步并行和异步串行),可进行多种形式的流程控制。
compiler和 Compilation 的区别
Loader和Plugin 的不同 ⭐
常见的 loader 和 plugin
loader:
- saas-loader 把 sass 语法转换成 css
- css-loader 分析 css 模块之间的关系,并合成⼀个 css
- style-loader 会把css-loader⽣成的内容,以 style 挂载到⻚⾯
- postcss-loader 使用 autoprefixer 自动添加浏览器前缀
- file-loader 移动静态资源到输出目录
- url-loader 同file-loader 还可以小图转base64
- babel-loader 转义 js
plugin:
- html-webpack-plugin ⾃动⽣成html⽂件
- clean-webpack-plugin 默认会删除 output 指定的输出⽬录
- terser-webpack-plugin 压缩代码
- mini-css-extract-plugin 提取css
- define-plugin 注入全局变量
Loader 怎么写⭐
loader 是一个函数,它的参数是匹配到的文件的源码,返回结果是处理后的源码。
this.callback(null, data)
,第一个参数传递错误,第二个参数可代替 return- 通过 loader-utils 的
getOptions
方法获取参数 - 异步处理,通过
this.async
来返回一个异步函数(第一个参数是 Error,第二个参数是处理的结果)
module.exports = function (source) {return source.replace('1', '2');
};
Plugin 怎么写⭐
webpack 在整个编译周期中会触发很多不同的事件,plugin 可以在对应的钩子上注册事件,webpack内部也是通过很多插件实现的。
- 插件一个类,有个 apply 方法,参数是 compiler 实例
- apply 方法内部通 compiler 的 hooks 注册不同时间点的事件
module.exports = class DemoPlugin {constructor(options) {this.options = options;}apply(compiler) {// 指定一个挂载到 webpack 自身的事件钩子compiler.hooks.emit.tap('RemoveCommentsPlugin', compilation => {// compilation => 可以理解为此次打包的上下文for (const name in compilation.assets) {console.log(name) // 输出文件名称}})}
};
webpack_111">webpack的模块化机制
webpack生成的文件里,包含了webpack的运行时,实现了类似commonjs的模块化机制
- 通过函数实现隔离
- 通过对象实现模块注册
懒加载原理
- 查找缓存
- 通过jsonp加载代码,执行回调,是个promise
热更新原理⭐
- dev-server 监听编译完成事件,利用 ws 告诉浏览器的hash和更新模块列表
- 通过 jsonp 获取更新模块的 js
- 替换先用模块,调用 module.hot.accept() 完成热更新
Webpack5 新特性⭐
- 内置静态资源构建能力,需要额外的loader
- 持久化缓存,提供二次构建速度
- 模块联邦
- 使用Module Federation时,应用将被划分为更小的应用块,每个应用块都是一个独立的构建,这些构建都将编译为容器
- 一个被引用的容器被称为remote, 引用者被称为host
Tree-Shaking 和Scope Hoisting
Tree-Shaking
Tree-Shaking 通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的 静态结构 特性,例如 import 和 export。这个概念是从 rollup 来的。
条件:
- 生产模式下,启动代码优化,通过 terser 删除 dead code
- 引入的包要
package.json
要sideEffects:false
- webpack 中使用 babel-loader 时,建议将
babel-preset-env
的moduels
配置项设置为 false,关闭模块导入导出语句的转译
Scope Hoisting
- 分析出模块之间的依赖关系,尽可能的把打散的模块合并到一个函数中去,但前提是不能造成代码冗余。 因此只有那些被引用了一次的模块才能被合并。
- 由于 Scope Hoisting 需要分析出模块之间的依赖关系,因此源码必须采用 ES6 模块化语句,不然它将无法生效。
hash、chunkhash、contenthash区别
- hash:和整个项目的构建相关,只要有文件修改,hash值就变
- chunkhash:根据chunk生成hash值,根据不同的入口文件
- contenthash:根据内容生成hash值
- js用 chunkhash,css 用 contenhash,图片用 contenthash(file-loader的hash是基于内容的)
SourceMap 最佳实践
module.exports = {devtool: 'source-map' // source-map设置,dev模式默认开启
}
开发环境使用:cheap-module-eval-source-map
source-map
是完整源代码,cheap
是指不含列信息- 需要
module
能定位loader
转换前的代码 - 使用
eval
重新构建速度快
生成环境使用:nosources-source-map
这个模式下,生成的map没有源码内容,我们能看到错误出现的位置(包含行列位置),无法看到源代码
监控平台使用:hidden-source-map
这个模式下,浏览器拿不到map,会一般用于错误收集,出错时把错误堆栈信息传给服务端
组件库怎么实现按需加载
babel-plugin-import
利用 babel 插件通过生成 AST 对 import语句,进行转换和生成。- 比如
import {Button} from 'xxx'
变为import button from 'xxx/button'