在 Webpack 中与源文件对应的文件夹中生成bundle

Question

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

await import("app/module/page")

默认情况下，preact-async-router 从相应路径加载捆绑包。 即，如果 src/a/b/c.tsx 则 http get/a/b/bundle.11.js。 我为此使用了 publicPath："/"解决方法，任何路径都替换为空字符串，但这并不能解决拥有大捆绑文件夹的问题。

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

我尝试使用文件名和路径键来生成动态输出路径，但它不起作用。函数只调用一次，因为有 1 个入口文件。子捆绑包文件不能用作入口点(对于页面重新加载，如果路径指向 404，我使用重写规则来加载索引.html)。

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

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

Answer 1

您可能需要参考SplitChunksPlugin其中详细介绍了如何配置optimization.splitChunks来管理区块。

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

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

这有一些好处，特别是更容易配置 VCS 忽略模式，并且还能够使用clean-webpack-plugin来确保您不会访问过时/保留孤立资产。