# Webpack 构建优化

# Bundler - 打包工具

将浏览器不支持的模块进行编译，转换，合并最后生成的代码可以在浏览器端良好的运行的工具。

Loaderhttps://webpack.docschina.org/concepts/loaders/

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或 “load(加载)” 模块时预处理文件。

多个 Loader module.rules 允许你在 webpack 配置中指定多个 loader。 这种方式是展示 loader 的一种简明方式，并且有助于使代码变得简洁和易于维护。

pluginshttps://webpack.docschina.org/concepts/plugins/

插件是 webpack 的 支柱 功能。webpack 自身也是构建于你在 webpack 配置中用到的相同的插件系统之上！插件目的在于解决 loader 无法实现的其他事。（我自己的理解，loader 解决的是各种不同资源的问题，plugins 更多解决的是项目整体的事情）

# loaders 的原理

在 loader 内部获取它的选项

使用 https://github.com/webpack/loader-utils 这个webpack 官方的 loader 的第三方工具库。

Marked.js 的配置选项https://marked.js.org/using_advanced

多个 Loader 串联

• 最后的 loader 最早调用，将会传入原始资源内容。
• 第一个 loader 最后调用，期望值是传出 JavaScript 和 source map（可选）。
• 中间的 loader 执行时，会传入前一个 loader 传出的结果。

将 markdown 转换为 html：turndown 地址：https://github.com/domchristie/turndown

# Plugins 的原理

Loaders 关注代码中的单个资源，Plugins 关注整体流程，可以接触到 webpack 构建流程中的各个阶段并劫持做一些代码处理。

官方的教程：https://webpack.js.org/contribute/writing-a-plugin/

插件的格式

• 一个 JavaScript 函数或 JavaScript 类
• 在它原型上定义的 apply 方法，会在安装插件时被调用，并被 webpack compiler 调用一次
• 指定一个触及到 webpack 本身的事件钩子，即 hooks，用于特定时机处理额外的逻辑

Compiler Hooks 列表https://webpack.js.org/api/compiler-hooks/

Compilation Hookshttps://webpack.js.org/api/compilation-hooks/

Copyright © 2022 @filway