为什么我的 webpack 构建检测到这么多孤立模块？

Question

我刚刚更新到 webpack 5。

这是我的 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`
        }
      }
    }
  }
}

很标准。

这是包输出：

一切都说得通。这就是我们拥有的：

一个runtime块。来自 runtimeChunk: "single" 选项
一个vendors块。来自 defaultVendors 缓存组
一个 app 块，来自 app: "./src/index.tsx" 入口点

但是还有一些我不明白的日志：

孤立模块

为什么 webpack 检测到如此多的模块 orphan？我的 src 文件夹中的文件总数约为 500 个。那里可能有一些丢失的文件，但我很确定它们中的大多数无论如何都不应被视为孤立文件，因为它们在应用程序代码中使用。

这是他们对孤立模块的定义：

我很确定我的大部分 src 文件都包含在 app 块中。那么他们怎么会被认为是孤儿呢？我可以检查或记录哪些模块被视为孤立模块吗？

我不确定这是否在 webpack 5 上启动。不记得 webpack 4 日志是否也有这个。我应该为此担心吗？它没有触发任何 warnings，但它会像那样被记录下来。

Answer 1

在分析我的 webpack 统计信息时，我一直对孤立模块感到好奇。我注意到串联模块始终被视为孤立模块。如果你查看 webpack 包分析器并看到连接的模块，这些很可能是你的孤立模块。我不确定这是否是 webpack 中的错误。

为什么我的 webpack 构建检测到这么多孤立模块？

Why is my webpack build detecting so many orphan modules?

webpack

webpack-5