`entry.chunkLoading = false` is overridden by `SplitChunksPlugin`

Bug report

Closely related: https://github.com/webpack/webpack/issues/4819.

What is the current behavior?

Here is an example Webpack config, with two entry points app and serviceWorker. For app, the config uses SplitChunksPlugin to put node_modules in a “vendor” chunk to improve long-term caching. Trying to dynamically load chunks from a service worker has failed each time I have tested it, so I want the serviceWorker entry to be compiled to one big JS file.

const path = require("path");

module.exports = {
  mode: "development",
  entry: {
    app: path.resolve(__dirname, "src/app.js"),
    serviceWorker: {
      import: path.resolve(__dirname, "src/serviceWorker.js"),
      chunkLoading: false, // This _should_ put everything in one JS file, but it doesn't
    },
  },

  output: {
    clean: true,
  },
  devtool: false,

  // Enable long-term caching of node_modules. See https://webpack.js.org/guides/caching/
  optimization: {
    moduleIds: "deterministic",
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendor",

          // Include all node_modules that are required for the initial load
          // in one big chunk. Dynamically-imported node_modules will still be
          // put in their own chunks.
          chunks: "initial",
        },
      },
    },
  },
};

The Webpack docs state here that you can pass chunkLoading: false when defining an entry to put everything in the main chunk. It seems like SplitChunksPlugin ignores this option.

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

1. Clone my repo: https://github.com/srmagura/webpack-split-chunks-repro
2. yarn install
3. yarn build
4. Check dist/serviceWorker.js and observe that lodash is not in the file. Lodash is loaded dynamically from the vendor chunk.

What is the expected behavior?

chunkLoading: false should cause serviceWorker.js to include all chunks required for the service worker to run. This means Lodash should be in serviceWorker.js.

Other relevant information:

As a workaround, I could compile my service worker through a separate Webpack config, but I wanted to check if there was a better option before doing so.

webpack version: 5.74.0 Node.js version: 16.17.0 Operating System: Ubuntu 22.04

[alexander-akait]

@srmagura what about this:

const path = require("path");

module.exports = {
  mode: "development",
  entry: {
    app: {
      layer: 'app',
      import: path.resolve(__dirname, "src/app.js")
    },
    serviceWorker: {
      layer: 'worker',
      import: path.resolve(__dirname, "src/serviceWorker.js"),
    },
  },

  output: {
    clean: true,
  },

  devtool: false,

  experiments: {
    layers: true
  },

  // Enable long-term caching of node_modules. See https://webpack.js.org/guides/caching/
  optimization: {
    moduleIds: "deterministic",
    splitChunks: {
      cacheGroups: {
        vendor: {
          layer: /^app$/,
          test: /[\\/]node_modules[\\/]/,
          name: "vendor",

          // Include all node_modules that are required for the initial load
          // in one big chunk. Dynamically-imported node_modules will still be
          // put in their own chunks.
          chunks: "all",
        },
      },
    },
  },
};

[alexander-akait]

@srmagura Yeah, will be great to see the minimum reproducible example, so I will answer why it happens