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 無疑是一個很好的工具。 但是我需要更多地了解您的用例才能提供最佳建議。