Concepts centraux du cadre webpack (résumé des connaissances)

qu'est-ce que webpack ?

webpack est un outil de construction de packages pour le frontend (ce n'est pas une bibliothèque ou un cadre), il peut convertir divers types de ressources, telles que JS (y compris JSX), coffee, css (y compris less/sass), images, etc. sont traités et utilisés comme modules.

1.connaissances de base

　　1.1 webpack est un assemblage de modules pour les applications JavaScript modernes. Lorsque webpack traite une application, il construit récursivement un diagramme de dépendances, contenant tous les modules nécessaires à l'application, puis les打包 en un ou plusieurs bundles.

　　1.2les quatre concepts centraux de webpack :

　　　　1.2.1 entry (entrée) : point d'entrée, point de départ (peut y en avoir plusieurs), webpack part de ce point de départ pour trouver quels fichiers sont dépendants du fichier d'entrée, construit ainsi un diagramme de dépendances interne et après traitement, les sorti sous forme de fichiers appelés bundles

　　　　1.2.2 output (sortie) : spécifie le chemin (path) et le nom (filename) du fichier bundle après le traitement de l'entry point　　　　

　　　　1.2.3 loader (chargeur): utilisé pour traiter les fichiers non JS, il peut convertir tous les fichiers en modules que webpack peut traiter, puis les transférer à webpack pour l'assemblage et autres traitements; en termes de base, le loader webpack transforme tous les types de fichiers en modules qui peuvent être directement引用 par le diagramme de dépendances de l'application, ayant deux objectifs :

　　　　　　1.2.3.1 使用test属性，识别出对应于 loader 的可转换文件

　　　　　　1.2.3.2 使用use属性将这些文件进行转换，使其被添加到依赖图中，并且最终会添加到 bundle 中

　　　　　　如果要在 webpack 配置中定义 loader ，要在 module.rules 中定义，而不是 rules

　　　　1.2.4 plugins(插件)：从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以处理各种各样的任务

　　　　　　使用一个插件只需要 require() 它，然后把它添加到 plugins 数组中就行。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。

　　　　　　webpack 提供许多开箱可用的插件！查阅插件列表获取更多信息，更详细的图文请参阅官方文档 https://doc.webpack-china.org/concepts/。

总结

以上所述是小编给大家介绍的Webpack框架核心概念(知识点整理)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对呐喊教程的支持！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#oldtoolbag.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。