javascript - 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

它输出我想要的文件但出现错误

Cannot resolve module

因为它对 webpack resolve 一无所知。

有什么建议吗？

Answer 1

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

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

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