网络包框架的核心概念(整理知识点)

什么是网络包

Webpack是一个前端打包工具(不是库或框架)，可以处理和使用各种资源，比如JS(包括JSX)、coffee、css(包括less/sass)、图片等作为模块。

1.基本知识点

1.1 webpack是现代JavaScript应用程序的模块捆绑器。当webpack处理一个应用程序时，它递归地构建一个依赖图，其中包含应用程序所需的每个模块，然后将所有这些模块打包成一个或多个包。

1.2 web pack的四个核心概念：

1.2.1入口：入口点、入口起点(可以有多个入口点)。从这个起点开始，webpack将找出条目文件依赖于哪些文件，然后构建一个内部依赖关系图，该图将被处理并输出到一个名为bundles的文件中。

1.2.2输出：指定入口点处理的bundles文件的输出路径和名称。

1.2.3 loader :用于处理非JS文件，可以将所有文件转换成webpack可以处理的模块，然后交给webpack进行打包等处理；本质上，webpack loader是一个模块，可以通过将所有类型的文件转换成应用程序的依赖图来直接引用它。它有两个目标：

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

1.2.3.2使用use属性来转换这些文件，以便将它们添加到依赖图中，并最终添加到包中

如果您想在webpack配置中定义一个加载器，您应该在module.rules中定义它，而不是在rules中

1.2.4插件：从打包优化和压缩到重新定义环境中的变量。插件接口非常强大，可以处理各种任务

要使用插件，只需要()并将其添加到插件数组中。大多数插件可以通过选项进行定制。您也可以在配置文件中为不同的目的多次使用同一个插件，然后您需要使用新的操作符创建它的一个实例。

webpack提供了许多开箱即用的插件！有关更多信息，请参考插件列表。更多详细的图片和文字请参考https://doc.webpack-china.org/concepts/官方文件。

摘要

以上是边肖介绍的Webpack框架的核心概念(整理知识点)，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。谢谢您的支持！