Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它会分析项目的结构，找出 JavaScript 模块之间的依赖关系，并将它们打包成一个或多个 bundle 文件，以便在浏览器中加载。
核心概念
入口（Entry）
Webpack 通过指定一个或多个入口文件来开始构建依赖图。入口文件告诉 Webpack 从哪里开始构建应用程序，并且可以指定多个入口文件以构建多个 bundle。
示例代码：
// webpack.config.js
module.exports = {
entry: './src/index.js'
};输出（Output）
Webpack 会根据配置文件中的 output 属性来确定输出的 bundle 文件的名称和路径。可以指定一个或多个输出文件，也可以使用占位符来动态生成输出文件名。
示例代码：
// webpack.config.js
module.exports = {
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};Loader
Webpack 只能处理 JavaScript 和 JSON 文件，但是通过使用 Loader，可以让 Webpack 处理其他类型的文件（如 CSS、图片、字体等）。Loader 可以将这些文件转换为模块，并将其添加到依赖图中。
示例代码：
-- -------------------- ---- -------
-- -----------------
-------------- - -
------- -
------ -
-
----- ---------
---- ---------------- -------------
-
-
-
--插件（Plugin）
插件用于执行各种任务，如优化、压缩、拆分代码等。可以通过配置文件中的 plugins 属性来使用插件。
示例代码：
-- -------------------- ---- -------
-- -----------------
----- ----------------- - -------------------------------
-------------- - -
-------- -
--- -------------------
--------- ------------------
--
-
--模式（Mode）
Webpack 4 中引入了模式的概念，可以通过设置 mode 属性为 development、production 或 none 来指定构建的模式。不同的模式会启用不同的内置优化。
示例代码：
// webpack.config.js
module.exports = {
mode: 'production'
};以上是 Webpack 的一些核心概念，了解这些概念可以帮助我们更好地使用 Webpack 来构建现代 JavaScript 应用程序。在接下来的章节中，我们将深入学习 Webpack 的更多功能和用法。