入口点

正如在 开始 中提到的，在 webpack 配置中定义 entry 属性有多种方式。我们将会向你展示配置 entry 属性的几种方式，并解释其对你可能有什么用处。

单入口（简写）语法

用法: entry: string | [string]

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js',
};

entry 属性的单入口语法是以下内容的简写

webpack.config.js

module.exports = {
  entry: {
    main: './path/to/my/entry/file.js',
  },
};

我们也可以将文件路径数组传递给 entry 属性，这会创建所谓的 “多主入口”。当你希望将多个依赖文件一起注入并将它们的依赖关系图整合到一个“块”中时，这会很有用。

webpack.config.js

module.exports = {
  entry: ['./src/file_1.js', './src/file_2.js'],
  output: {
    filename: 'bundle.js',
  },
};

当你希望为具有单一入口点（例如库）的应用程序或工具快速设置 webpack 配置时，单入口语法是一个不错的选择。然而，使用这种语法扩展或扩展你的配置的灵活性不大。

对象语法

用法: entry: { <entryChunkName> string | [string] } | {}

webpack.config.js

module.exports = {
  entry: {
    app: './src/app.js',
    adminApp: './src/adminApp.js',
  },
};

对象语法更冗长。然而，这是在你的应用程序中定义入口/入口点最可扩展的方式。

EntryDescription 对象

入口点描述对象。你可以指定以下属性。

• dependOn：当前入口点所依赖的入口点。它们必须在此入口点加载之前加载。

• filename：指定磁盘上每个输出文件的名称。

• import：启动时加载的模块。

• library：指定 库选项 以从当前入口点打包库。

• runtime：运行时块的名称。设置后，将创建一个新的运行时块。自 webpack 5.43.0 起，可以将其设置为 false 以避免新的运行时块。

• publicPath：指定此入口点输出文件在浏览器中被引用时的公共 URL 地址。另请参阅 output.publicPath。

webpack.config.js

module.exports = {
  entry: {
    a2: 'dependingfile.js',
    b2: {
      dependOn: 'a2',
      import: './src/app.js',
    },
  },
};

runtime 和 dependOn 不应在单个入口点上同时使用，因此以下配置无效并会抛出错误

webpack.config.js

module.exports = {
  entry: {
    a2: './a',
    b2: {
      runtime: 'x2',
      dependOn: 'a2',
      import: './b',
    },
  },
};

确保 runtime 不能指向已存在的入口点名称，例如以下配置会抛出错误

module.exports = {
  entry: {
    a1: './a',
    b1: {
      runtime: 'a1',
      import: './b',
    },
  },
};

此外，dependOn 不能是循环依赖的，以下示例也会抛出错误

module.exports = {
  entry: {
    a3: {
      import: './a',
      dependOn: 'b3',
    },
    b3: {
      import: './b',
      dependOn: 'a3',
    },
  },
};

场景

以下是入口配置及其实际用例的列表

分离应用和供应商入口

webpack.config.js

module.exports = {
  entry: {
    main: './src/app.js',
    vendor: './src/vendor.js',
  },
};

webpack.prod.js

module.exports = {
  output: {
    filename: '[name].[contenthash].bundle.js',
  },
};

webpack.dev.js

module.exports = {
  output: {
    filename: '[name].bundle.js',
  },
};

这有什么用？ 我们是在告诉 webpack，我们希望有 2 个独立的入口点（如上例所示）。

为什么？ 有了它，你可以在 vendor.js 中导入所需的未修改的库或文件（例如 Bootstrap、jQuery、图片等），它们将被打包成自己的块。内容哈希保持不变，这允许浏览器单独缓存它们，从而减少加载时间。

多页应用程序

webpack.config.js

module.exports = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js',
  },
};

这有什么用？ 我们是在告诉 webpack，我们希望有 3 个独立的依赖图（如上例所示）。

为什么？ 在多页应用程序中，服务器会为你获取一个新的 HTML 文档。页面会重新加载这个新文档，并且资源会被重新下载。然而，这为我们提供了独特的机会，可以利用 optimization.splitChunks 等方法在每个页面之间创建共享应用程序代码的包。入口点之间重用大量代码/模块的多页应用程序可以从这些技术中大大受益，因为入口点的数量会增加。