Why is my webpack build detecting so many orphan modules?

Question

I've just updated to webpack 5.

This is my webpack.config.ts:

import * as path from "path";
import * as webpack from "webpack";

const config: webpack.Configuration = {

  mode: "production",

  devtool: false,

  output: {
    filename: "[name].[contenthash:5].js",
    path: path.resolve(__dirname, "public"),
    publicPath: "/"
  },
  
  entry: {
    app: "./src/index.tsx"
  },

  module: {
    rules:[{
      test: /\.(js|jsx|ts|tsx)$/,
      include: path.resolve(__dirname, "src"),
      use: ["babel-loader"]
    }]
  },

  plugins: [
    new HtmlWebpackPlugin({ ... })
  ],

  optimization: {
    moduleIds: "deterministic",
    runtimeChunk: "single",
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        defaultVendors: {
          filename: `vendors.[contenthash:5].js`
        }
      }
    }
  }
}

It's pretty standard.

This is the bundle output:

Everything makes sense. This is what we have:

• A runtime chunk. From the runtimeChunk: "single" option
• A vendors chunk. From the defaultVendors cacheGroup
• An app chunk, from the app: "./src/index.tsx" entrypoint

But there are other logs that I don't understand:

orphan modules

Why is webpack detecting so many modules as orphan? My total amount of files in my src folder is around ~500. There are probably some lost files in there, but I'm pretty sure most of them should not be considered orphan by any means, since they are used across the app code.

This is their definition for orphan modules:

And I'm pretty sure most of my src files are included in the app chunk. So how could they be considered orphan? Can I inspect or log which modules are being considered orphan?

I'm not sure if this started on webpack 5 or not. Don't remember if webpack 4 logs also had this. Should I worry about this? It's not triggering any warnings, but it gets logged like that.

Brucie

Answer 1

I have been curious about orphan modules, as I was analyzing my webpack stats. I noticed that concatenated modules are always considered orphan modules. If you look in webpack bundle analyzer and see concatenated modules, those will be your orphan modules most likely. I'm not sure if this is a bug or not in webpack.

Stretcher

What do you mean by concatenated modules? – Brucie

Webpack automatically inlines code together as an optimization in some cases. If you use bundle analyzer plug-in you’ll see the concatenated modules in your build. - for more info on concatenation - take a look here webpack.js.org/plugins/module-concatenation-plugin – Stretcher

webpack bundle analyzer is a useful hint, thanks! – Osteo

webpack seems to consider this not a bug, though I'm not sure I understand the explanation. github.com/webpack/webpack/issues/12568 – Silverplate

Answer 2

Have you actually read what orphan module is? https://webpack.js.org/configuration/stats/#statsorphanmodules

Why do you think it's included. Probably it's wepback detection for something that is not used. Lib can contain many modules, but not all of them (even if you connect them) are used in your application.

Maryellen