webpack 构建到多个文件答案

【问题标题】：webpack build to multiple fileswebpack 构建到多个文件
【发布时间】：2016-08-16 07:45:54
【问题描述】：

我有 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 解析一无所知。

有什么建议吗？

【问题讨论】：

请阅读标签说明！ babel 不是正确的标签（它也明确表示）：“Python 国际化库，重点是基于 Web 的应用程序。有关 JavaScript 库的问题，请使用 [babeljs]。”

标签： javascript ecmascript-6 webpack babeljs

【解决方案1】：

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

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

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

【讨论】：

谢谢 Ben 的回复，我只是想实现 import { Login } from 'my-module/components'。我正在用 webpack 编写模块，我将把它包含在我的 webpack web 应用程序中，只想进行这样的导入，现在我已经从“my-module”导入 { components } 并且可以像 components.Login 一样访问登录。有什么建议吗？
听起来您实际上在使用 es6 导入语法时遇到了一些麻烦，而 webpack 可以很好地满足您的需求。您可以发送您想要的 my-module/components 文件夹结构吗？听起来您尝试使用的语法需要 my-module 文件夹中名为 components.js(x) 的文件，其导出如下所示：export class Login...。看起来您实际上可能想要做的是在组件文件夹中有一个单独的文件用于登录，称为 Login.jsx。在这种情况下，Login.jsx 应该在底部有 export default Login;（假设 Login 是一个组件）。
如果 Login.jsx 是它自己的文件并且是 export default，那么你需要像这样导入 ti：import Login from 'my-modules/components/Login';
如果你真的很喜欢import { Login } from 'my-modules/components';，那么你可以在导入和导出Login.jsx的组件文件夹中放置一个index.js文件，例如：import Login from './Login';然后export Login。我认为这可行，但它不是传统的，每次添加组件时都需要不必要的样板。