Unexpected behavior for advanced `dependOn` usage

Bug report

What is the current behavior?

According to the documentation and examples, entry points provided to another entry’s dependOn property must:

[…] be loaded before this entry point is loaded

Whilst this works correctly with a single value, it doesn’t give the desired outcome (see below) when providing it with more advanced values (e.g. a “chained” dependOn structure).

I noticed that in the Advanced dependOn example, the depended-on entries are included after the entry depending on them.

If the current behavior is a bug, please provide the steps to reproduce.

Given the following config (a stripped down version of our project’s config, where we’ve noticed this after recently migrating to v5):

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

// Entries
const commonEntry = "common";
const globalEntry = "global";
const entryNames = [globalEntry, "a", "b", "c"];

const entries = { [commonEntry]: ["react", "react-dom"] };

entryNames.forEach(entry => {
  entries[entry] = {
    import: path.join(__dirname, "src/entries", entry, "entry.js"),
    dependOn: entry === globalEntry ? [commonEntry] : [commonEntry, globalEntry],
  };
});

// Generate markup partials
const entryHtmls = Object.keys(entries).map(entry => new HtmlWebpackPlugin({
  chunks: [entry],
  inject: false,
  template: path.join(__dirname, "webpack/templates/js.html"),
  filename: `${entry}/js.html`,
}));

module.exports = {
  entry: entries,
  output: {
    filename: "[name]/[name]-[contenthash]-bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  optimization: {
    splitChunks: { chunks: "all" },
    runtimeChunk: "single",
  },
  plugins: [...entryHtmls],
};

I see that the assets are bundled in the following order:

assets by info 3.91 MiB [immutable]
  assets by chunk 3.87 MiB (id hint: vendors)
    asset common/common-cc008264e0fab30884bc-bundle.js 2.48 MiB [emitted] [immutable] (name: common) (id hint: vendors)
    asset vendors-node_modules_lodash_lodash_js/vendors-node_modules_lodash_lodash_js-73af31127d98264393e1-bundle.js 1.39 MiB [emitted] [immutable] (id hint: vendors)
  asset c/c-b09613e149a23b90d79b-bundle.js 9.46 KiB [emitted] [immutable] (name: c)
  asset b/b-0ef964a8fc4dbd8bcf95-bundle.js 9.4 KiB [emitted] [immutable] (name: b)
  asset a/a-93fd194d2175735d03fd-bundle.js 9.35 KiB [emitted] [immutable] (name: a)
  asset global/global-19fa78b68955244d2f44-bundle.js 7.68 KiB [emitted] [immutable] (name: global)
  asset runtime/runtime-d1973ae5538d57c1c468-bundle.js 7.49 KiB [emitted] [immutable] (name: runtime)

And the outputted templates via html-webpack-plugin look like:

<!-- common/js.html -->
<script src="../runtime/runtime-d1973ae5538d57c1c468-bundle.js"></script>
<script src="../common/common-cc008264e0fab30884bc-bundle.js"></script>

<!-- global/js.html -->
<script src="../vendors-node_modules_lodash_lodash_js/vendors-node_modules_lodash_lodash_js-73af31127d98264393e1-bundle.js"></script>
<script src="../global/global-19fa78b68955244d2f44-bundle.js"></script>

<!-- a/js.html -->
<script src="../vendors-node_modules_lodash_lodash_js/vendors-node_modules_lodash_lodash_js-73af31127d98264393e1-bundle.js"></script>
<script src="../a/a-93fd194d2175735d03fd-bundle.js"></script>

<!-- b/js.html -->
<script src="../vendors-node_modules_lodash_lodash_js/vendors-node_modules_lodash_lodash_js-73af31127d98264393e1-bundle.js"></script>
<script src="../b/b-0ef964a8fc4dbd8bcf95-bundle.js"></script>

<!-- c/js.html -->
<script src="../vendors-node_modules_lodash_lodash_js/vendors-node_modules_lodash_lodash_js-73af31127d98264393e1-bundle.js"></script>
<script src="../c/c-b09613e149a23b90d79b-bundle.js"></script>

If I adjust the order of entryNames to the following (placing our “second dependOn” last):

const entryNames = ["a", "b", "c", globalEntry];

The assets are now bundled in the following order:

assets by info 3.89 MiB [immutable]
  assets by chunk 3.87 MiB (id hint: vendors)
    asset common/common-cc008264e0fab30884bc-bundle.js 2.48 MiB [emitted] [immutable] (name: common) (id hint: vendors)
    asset vendors-node_modules_lodash_lodash_js/vendors-node_modules_lodash_lodash_js-73af31127d98264393e1-bundle.js 1.39 MiB [emitted] [immutable] (id hint: vendors)
  asset global/global-19fa78b68955244d2f44-bundle.js 7.68 KiB [emitted] [immutable] (name: global)
  asset runtime/runtime-d1973ae5538d57c1c468-bundle.js 7.49 KiB [emitted] [immutable] (name: runtime)
  asset c/c-73abcc6182827bdc0368-bundle.js 4.5 KiB [emitted] [immutable] (name: c)
  asset b/b-974777b752aa37254653-bundle.js 4.45 KiB [emitted] [immutable] (name: b)
  asset a/a-ddf20413318aed626714-bundle.js 4.4 KiB [emitted] [immutable] (name: a)

Resulting in the expected output for the template files:

<!-- common/js.html -->
<script src="../runtime/runtime-d1973ae5538d57c1c468-bundle.js"></script>
<script src="../common/common-cc008264e0fab30884bc-bundle.js"></script>

<!-- global/js.html -->
<script src="../vendors-node_modules_lodash_lodash_js/vendors-node_modules_lodash_lodash_js-73af31127d98264393e1-bundle.js"></script>
<script src="../global/global-19fa78b68955244d2f44-bundle.js"></script>

<!-- a/js.html -->
<script src="../a/a-ddf20413318aed626714-bundle.js"></script>

<!-- b/js.html -->
<script src="../b/b-974777b752aa37254653-bundle.js"></script>

<!-- c/js.html -->
<script src="../c/c-73abcc6182827bdc0368-bundle.js"></script>

What is the expected behavior?

If this is intended functionality, I think it should be stated in the docs. However I have a feeling it isn’t, since it doesn’t seem logical to have to place entries in this reverse order.

If not intentional, when providing entries in the first order (globalEntry at start of array) I would expect to have the output as from the second order (globalEntry at end of array).

Other relevant information: webpack version: 5.35.1 Node.js version: 12.18.0 Operating System: macOS 10.15.7 Additional tools: -

---

Some extra things

1. After writing this up, I’m now thinking that the “must be loaded before this entry point is loaded” text is actually referring to loading the bundles within your app/page - and not the order in the entry object. However there still seems to be some odd behaviour here from what I can see, so I shall proceed with opening the issue.
2. I have a repro ready to go, I thought that maybe the above info alone would suffice, but if a slightly fuller example is better I’ll create a repository.
3. Whether the outcome of this be an adjustment to the documentation or something at code level, I’m happy and eager to participate - if someone would be kind enough to point me in the right direction 🙂.

Thanks!

[breadadams]

Thanks @alexander-akait, from skimming over some of what I believe is the related source code for handling entries/chunks and more so the dependsOn property I had a feeling it may be a bug, although I must admit I don’t fully understand all the inner workings.

I’ll try and get my hands dirty in the coming days, however if someone can pitch in here it would be highly appreciated.

Thanks again 🙂

[alexander-akait]

I have a repro ready to go, I thought that maybe the above info alone would suffice, but if a slightly fuller example is better I’ll create a repository.

Will be great to look at this, thanks