【webpack学习】

webpack由于历史包袱导致复杂，只要把握关键流程即可

webpack的主要流程
loader plugin
难点：HMR / 懒加载原理
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 的区别

compiler 可以理解为 webpack 的实例，代表了 webpack 的配置，包括options、loader和plugin

compilation 表示一次资源构建过程中的上下文对象。包含这次构建中的全部资源和信息，文件有改动就会重新构建。

Loader和Plugin 的不同 ⭐

webpack 将一起文件都看成模块，通过 loader 可以对文件进行转换
plugin 可以扩展webpack的功能，作用与整个构建周期，通过监听特定的事件执行特定的逻辑。

常见的 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，第二个参数是处理的结果）

javascript 复制代码

module.exports = function (source) {
  return source.replace('1', '2');
};

Plugin 怎么写⭐

webpack 在整个编译周期中会触发很多不同的事件，plugin 可以在对应的钩子上注册事件，webpack内部也是通过很多插件实现的。

插件一个类，有个 apply 方法，参数是 compiler 实例
apply 方法内部通 compiler 的 hooks 注册不同时间点的事件

javascript 复制代码

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的模块化机制

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 最佳实践

javascript 复制代码

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'