WebPack:多个入口点，没有额外的块

WebPack: Multiple entry points without additional chunks

本文关键字：入口 WebPack      更新时间：2023-09-26

我想使用 WebPack 来构建我的 JavaScript 应用程序。该应用程序应该以几种不同的修改部署在多个站点上。因此，我已将配置设置为使用多个入口点，每个站点一个：

entry: {
  s1: "s1",
  s2: "s2",
  s3: "s3"
},

该应用程序还使用多个依赖项，这些依赖项通过AMD模块加载（我之前使用过RequireJS）：

c1
c2
...

假设s1需要c1和c2，而s2只需要c1。构建工作正常，它会创建s1、s2和s3作为入口点，并根据站点需要创建包含各种组件组合的几个块：

/* s1 */
define(['c1', 'c2'], function(c1, c2) { ... }

我的问题是：我需要在配置中指定什么才能将每个站点包构建为一个独立文件？我很欣赏 WebPack 将应用程序拆分为块的能力，但现在我需要每个构建都是一个 JS 文件（出于各种原因）。

当我只配置一个入口点（例如entry: "s1"）时，我能够轻松实现这一点，使用以下方法：

webpack.optimize.LimitChunkCountPlugin({maxChunks: 1})

但是，对于多个入口点，此配置会在所有入口点之上创建一个额外的块。如何确保每个构建的入口点（例如 s1.bundle.js、s2.bundle.js 、...）都包含该文件中的所有 JavaScript，并且不需要按需加载任何块？

听起来最简单的方法是拥有多个构建（每个构建都有一个入口点），而不是具有多个入口点的单个构建。如果您的 webpack.config.js 导出一组配置对象而不是单个配置对象，则 webpack 将自动为每个配置执行单独的构建。因此，例如，您可以将入口点放在一个数组中并循环遍历它，为每个入口点创建一个配置对象。现在每个配置只有一个入口点，LimitChunkCountPlugin应该给你一个文件。

在 Webpack 5 中，您可以在条目定义中使用chunkLoading: false。

{
  // ...
  entry: {
    s1: {
      import: "s1",
      chunkLoading: false
    }
    s2: {
      import: "s2",
      chunkLoading: false
    }
    s3: {
      import: "s3",
      chunkLoading: false
    }
  },
  // ...
}

https://webpack.js.org/configuration/entry-context/#entry-descriptor

从上面的链接复制代码示例，以防将来链接断开：

module.exports = {
  //...
  entry: {
    home: './home.js',
    shared: ['react', 'react-dom', 'redux', 'react-redux'],
    catalog: {
      import: './catalog.js',
      filename: 'pages/catalog.js',
      dependOn: 'shared',
      chunkLoading: false, // Disable chunks that are loaded on demand and put everything in the main chunk.
    },
    personal: {
      import: './personal.js',
      filename: 'pages/personal.js',
      dependOn: 'shared',
      chunkLoading: 'jsonp',
      asyncChunks: true, // Create async chunks that are loaded on demand.
      layer: 'name of layer', // set the layer for an entry point
    },
  },
};
相关文章：