Question

我将webpack与preact-async-router一起使用，它允许将代码库拆分和加载到包中。它工作正常，但包位于1个文件夹中，并且具有扁平结构。我预计大量捆绑软件会出现性能问题。

await import("app/module/page")

默认情况下，preact-async-router会从相应的路径加载包。即如果是src / a / b / c.tsx，则http获取/a/b/bundle.11.js。我使用publicPath：“ /”解决方法，并且所有路径都替换为空字符串，但这不能解决具有大bundle文件夹的问题。

  output: {
    filename: "./bundle.js",
    publicPath: "/"
  },

我尝试使用文件名和路径键，并使用它们来生成动态输出路径，但是它不起作用。函数仅被调用一次，导致有1个入口文件。子捆绑包文件不能用作入口点（对于页面重新加载，如果路径指向404，我将使用重写规则来加载index.html。）

括号中没有适当的变量保存原始文件的路径。

因此，如果有一种方法可以评估每个文件的文件名功能，则可以删除publicPath。

Answer 1

您可能想参考SplitChunksPlugin，其中包含有关如何配置optimization.splitChunks来管理块的详细信息。

具体来说，splitChunks.name允许您传入一个函数来更改块名称，这应该允许您将其移动到资产中的子路径上。

侧面说明：虽然可以将输出目录配置在源目录内，但从技术上讲，您应该始终可以在外部配置输出路径（因为publicPath和outputPath是独立的）。您可以使用copy-webpack-plugin将静态源移动到输出中。

这有一些好处，特别是可以更轻松地配置VCS忽略模式，还可以使用clean-webpack-plugin确保您不会访问陈旧的/保留孤立的资产。