webpack 构建到多个文件

Question

我有 web pack 应用程序，想要构建输出多个文件而不是单个 javascript 文件。 例如，如果我有这样的文件夹结构

components
 1.js
 2.js
actions
 1.js.
 2.js

我的 webpack 构建必须在相同的文件夹结构中编译文件。 我怎么能做到这一点？

我试过 babel cli：

babel ./src --out-dir ./lib --source-maps --presets es2015,react --plugins babel-plugin-add-module-exports,babel-plugin-transform-decorators-legacy,babel-plugin-transform-class-properties --watch

它按照我的意愿输出文件但出现错误

无法解析模块

因为它对 webpack 解析一无所知。

有什么建议吗？

Answer 1

让 webpack 输出多个文件是可能的，但它确实有局限性。 首先，了解它是如何工作的很重要。 Webpack 实际上提供了一个运行时脚本，可以根据需要加载代码“块”，这对于大型应用程序很重要，因此用户不必为了查看主页而下载整个应用程序的 javascript。 但是 webpack 需要跟踪这些块以及它们在构建时命名的内容，以便能够在运行时正确加载它们。 出于这个原因，它有自己的文件命名约定来启用此功能。 在此处查看更多信息： https : //webpack.js.org/guides/code-splitting/ 。 所以你可以 require.ensure 你所有的 deps，但它们不会按照你描述的方式命名和文件夹，因为在这种情况下 webpack 的运行时将无法找到它们。

另一件需要考虑的重要事情是 webpack 是一个打包器，所以它是用来打包文件的。 基本上你说你不想捆绑你的文件。 因此，如果是这种情况，您可能应该考虑使用 require.js。 许多人已经从 require 转向了诸如 Wepback 和 Browserify 之类的打包器，因为单独下载每个小模块通常效率不高。 但是，每个应用程序都是不同的，因此您实际上可能有充分的理由不捆绑。

如果您确实想做一些捆绑但想优化它的完成方式，那么我也可以提供帮助，而 webpack 无疑是一个很好的工具。 但是我需要更多地了解您的用例才能提供最佳建议。