这是我参与「第五届青训营」笔记创作活动的第15天。

本笔记对应的是青训营关于Webpack插件部分课程。

1 课程内容概括

本笔记对应的课程部分介绍了Webpack插件。

2 为什么要使用插件的设计方式

流程复杂导致对新人来讲难度大、上手成本高；

功能迭代时，作出修改的成本较高，一处修改很可能影响整体；

作为开源项目，功能比较固定而僵化，缺乏成长性

而插件架构的精髓是对扩展开放、对修改封闭

3 常见Webpack插件

常用的Webpack插件

• HtmlWebpackPlugin：将打包后的 JS 文件自动插入到 HTML 模板中，并生成一个新的 HTML 文件。
• MiniCssExtractPlugin：将CSS提取到独立的文件中，以便于浏览器缓存。
• DefinePlugin：允许在代码中定义全局常量。
• HotModuleReplacementPlugin：支持热更新，在开发过程中无需手动刷新页面即可实时看到修改效果。
• UglifyJsPlugin：压缩JavaScript代码，以减少文件大小和加载时间。
• CleanWebpackPlugin：在每次打包之前清除之前打包生成的文件。
• CopyWebpackPlugin：将文件从源目录复制到目标目录，例如将静态文件复制到打包后的目录中。
• BundleAnalyzerPlugin：分析打包后的文件大小和依赖关系。

4 理解插件：钩子

Webpack插件通过挂载到特定的钩子扩展Webpack的功能。Webpack钩子是一个可被 Webpack调用的函数，插件可以在Webpack的构建流程中挂载到相应的钩子上，在执行特定的阶段执行插件自定义的逻辑。

时机：complier.hooks.compilation 参数：compilation等 交互：dependencyFactories.set

5 总结与思考

本笔记对应的课程内容详细介绍了Webpack插件化及钩子。至此，Webpack部分知识总结完毕。在入门时，应该理解打包流程、掌握常用配置项、Loader、插件的使用方法，能够根据需要搭建所需工具的Webpack环境，并能够掌握常见的脚手架用法。

进阶学习需要理解Loader和插件机制，能够自行开发Webpack组件，能够理解常见的性能优化手段。理解前端工程化及其现状。

更深层次则需要阅读源码、理解Webpack编译、打包原理，甚至于能够参与共建。