作用：指示 webpack 应该使用哪个文件作为入口起点开始打包，分析构建内部依赖图。
默认值： ./src/index.js，但是可以在 webpack.config.js 配置文件中配置 entry 属性，来重新自定义一个（或多个）不同的入口起点

单入口（简写）写法
用法：entry: string | [string]

  1. // 简写写法
  2. module.exports = {
  3.   entry: './path/to/my/entry/file.js',
  4. };
  6. // 完整写法
  7. module.exports = {
  8.   entry: {
  9.     main: './path/to/my/entry/file.js',
  10.   },
  11. };

缺点：扩展性或灵活性不好

多入口（对象写法）
用法：entry: { string | [string] } | {}

  1. module.exports = {
  2.   entry: {
  3.     app: './src/app.js',
  4.     adminApp: './src/adminApp.js',
  5.   },
  6. };

描述入口的对象
用于描述入口的对象。你可以使用如下属性：

  • dependOn: 当前入口所依赖的入口。它们必须在该入口被加载前被加载。

    在代码分离中，通过 入口的方式手动分离代码、防止重复中有用到这个属性

  • filename: 指定要输出的文件名称。

  • import: 启动时需加载的模块。
  • library: 指定 library 选项，为当前 entry 构建一个 library。
  • runtime: 运行时 chunk 的名字。如果设置了，就会创建一个新的运行时 chunk。在 webpack 5.43.0 之后可将其设为 false 以避免一个新的运行时 chunk。
  • publicPath: 当该入口的输出文件在浏览器中被引用时，为它们指定一个公共 URL 地址。请查看 output.publicPath。

    publicPath 与 path 属性的不同

:::info Q：为什么webpack中会有单入口和多入口 与SPA 和 MPA有关吗 :::

补充 - webpack依赖关系图

webpack到底是如何对我们的项目进行打包的呢？

  • 事实上，webpack在处理应用程序时，它会根据命令或者webpack配置文件（webpack.config.js）找到入口文件；

  • 从入口文件开始，查找我们依赖的所有文件（即在入口文件中引入的文件），会生成一个 依赖关系图（图结构），这个依赖关系图会包含应用程序中所需的所有模块（比如.js文件、css文件、图片、字体等）；

    假设index.js是入口文件，里面引入了1.js、2.js，没有引入3.js（尽管写了这个js文件），但是依赖关系图并不包含3.js（当然也不会被打包了） 或者比如，你npm install axios，然后应用程序中并没有用到axios，即使你安装了，但并没有使用，打包后的文件也是不包含axios的

  • 然后遍历图结构，打包一个个模块（根据文件的不同使用不同的loader来解析）；

image.png