2

我刚刚更新到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这么多模块检测为孤儿？我文件src夹中的文件总数约为 500 个。那里可能有一些丢失的文件，但我很确定它们中的大多数不应该被视为孤儿，因为它们在应用程序代码中使用。

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

在此处输入图像描述

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

我不确定这是否从 webpack 5 开始。不记得 webpack 4 日志是否也有这个。我应该担心这个吗？它没有触发任何warnings，但它会像这样记录。

4

1 回答 1

3

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

于 2021-02-02T23:00:35.813 回答