webpack

语义

• 模块打包工具。
• 运行在Node环境中的工具。

• 开发环境中编辑的代码，自动化打包成生产环境中运行代码的工具。

  webpack工具解决的问题

  因为开发环境中的代码和生产环境中的代码是不一样的。中间自动转换的工具就是通过webpack完成。最终实现项目构建的工程自动化。

• 开发环境中的代码需求：可维护、模块化。

• 生产环境中的代码需求：页面快速加载，减少http请求，减少文件的数量，压缩代码。

最终多个模块，打包成一个或很少数量的包（dist文件夹下的buddle文件）。

核心概念

依赖图

1. 入口模块，作为webpack构建依赖图的起点。
2. 模块的依赖有：JS、assets(图片、字体文件、CSS文件)

   module、chunk、buddle

   参考链接

• https://www.cnblogs.com/skychx/p/webpack-module-chunk-bundle.html
• https://juejin.cn/post/6844903889393680392

• module：源代码目录下的文件。
• chunk：功能块，整个依赖模块构成一个chunk（功能块）。
• buddle：最终打包的文件。

  entry

  语义告诉webpack构建模块依赖图的入口模块。
  关键点可以有多个入口模块。

  output

  语义告诉webpack打包输出的模块的位置，以及名字。

  loader

  语义webpack只能处理javascript模块，非javascript模块需要经过loader变成webpack能够处理的模块。

  plugin

  语义扩展webpack的功能，可以处理各种各样的任务。例如：打包的优化和压缩…
  关键点webpack有内置的插件，以及外部插件。