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

Question

I want to use WebPack to build my JavaScript application. The application is supposed to be deployed on several sites, in several different modifications. Therefore, I have set up the config to use multiple entry points, one per each site:

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

The application also uses several dependencies, which are loaded via AMD modules (I used RequireJS before):

c1
c2
...

Let's say that s1 requires both c1 and c2 , whereas s2 needs only c1 . The build works OK, and it creates s1 , s2 and s3 as the entry points, and several chunks containing various combinations of the components, as the sites need:

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

The question I have is: What do I need to specify in the configuration in order to get each site package built as one standalone file? I appreciate the ability of WebPack to split the application into chunks, but right now I need every build to be one JS file (for various reasons).

I am able to achieve that easily when I configure only a single entry point (such as entry: "s1" ), using the following:

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

However, for multiple entry points, this configuration creates one additional chunk on top of all entry points. How can I make sure each built entry point (such as s1.bundle.js , s2.bundle.js , ...) contains all JavaScript inside that one file, and doesn't need to load any chunks on demand?

Answer 1

Sounds like the easiest way is to have multiple builds (each with one entry point) rather than a single build with multiple entry points. If your webpack.config.js exports an array of config objects instead of a single config object, webpack will automatically do a separate build for each config. So you could, for example, put your entry points in an array and loop through it, creating a config object for each. Now each config has only a single entry point, and the LimitChunkCountPlugin should give you the single file.

Answer 2

In Webpack 5, you can use chunkLoading: false in your entry definition.

{
  // ...
  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

Copying the code example from the link above in case the link breaks in the future:

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
    },
  },
};