以下学习内容来自webpack官方文档 .
还是我自己的习惯,在学习使用某个工具之前,先搞清楚它的核心概念和是什么原理来工作的,这对我很重要。那么,就开始吧 ~
Concepts
webpack是什么?
At its core, webpack is a module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into one or more bundles.
- - https://webpack.js.org/concepts/
简单的说。webpack的核心就是将JS应用程序打包成模块。当webpack处理我们的程序的时候,会递归的构建一个依赖图,其中包含了应用程序所需的各个模块。然后这些模块会被打包到一个或多个的包。
工作原理图
大概了解了webpack是做什么的之后,我们所需要了解的就是以下四个概念:
- Entry
- Output
- Loaders
- Plugins
一.Entry
Entry指示webpack应该从哪个模块开始构建其内部依赖关系图。webpack会找出Entry所依赖的其它模块和库(直接依赖或间接依赖)。每个依赖都会被处理和输出到bundles中。我们可以通过在webpack配置中配置Entry属性来指定一个或多个Entry点。
entry configuration的简单例子