Webpack 概念

Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它会分析项目的结构，找出 JavaScript 模块之间的依赖关系，并将它们打包成一个或多个 bundle 文件，以便在浏览器中加载。

核心概念

入口（Entry）

Webpack 通过指定一个或多个入口文件来开始构建依赖图。入口文件告诉 Webpack 从哪里开始构建应用程序，并且可以指定多个入口文件以构建多个 bundle。

示例代码：

-- -----------------
-------------- - -
  ------ ----------------
--

输出（Output）

Webpack 会根据配置文件中的 output 属性来确定输出的 bundle 文件的名称和路径。可以指定一个或多个输出文件，也可以使用占位符来动态生成输出文件名。

示例代码：

-- -----------------
-------------- - -
  ------- -
    --------- ------------
    ----- ----------------------- -------
  -
--

Loader

Webpack 只能处理 JavaScript 和 JSON 文件，但是通过使用 Loader，可以让 Webpack 处理其他类型的文件（如 CSS、图片、字体等）。Loader 可以将这些文件转换为模块，并将其添加到依赖图中。

示例代码：

-- -----------------
-------------- - -
  ------- -
    ------ -
      -
        ----- ---------
        ---- ---------------- -------------
      -
    -
  -
--

插件（Plugin）

插件用于执行各种任务，如优化、压缩、拆分代码等。可以通过配置文件中的 plugins 属性来使用插件。

示例代码：

-- -----------------
----- ----------------- - -------------------------------

-------------- - -
  -------- -
    --- -------------------
      --------- ------------------
    --
  -
--

模式（Mode）

Webpack 4 中引入了模式的概念，可以通过设置 mode 属性为 development、production 或 none 来指定构建的模式。不同的模式会启用不同的内置优化。

示例代码：

-- -----------------
-------------- - -
  ----- ------------
--

以上是 Webpack 的一些核心概念，了解这些概念可以帮助我们更好地使用 Webpack 来构建现代 JavaScript 应用程序。在接下来的章节中，我们将深入学习 Webpack 的更多功能和用法。