入口点

如 入门 中所述，在 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 个独立的入口点（如上面的示例）。

为什么？ 通过这种方式，您可以将所需的库或未修改的文件（例如 Bootstrap、jQuery、图像等）导入到 vendor.js 中，它们将被捆绑在一起到自己的块中。内容哈希保持不变，这允许浏览器单独缓存它们，从而减少加载时间。

多页面应用程序

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 在每个页面之间创建共享应用程序代码的包。在多个入口点之间重复使用大量代码/模块的多页面应用程序可以从这些技术中获益匪浅，因为入口点的数量会增加。