Webpack可變命名為require

Question

我正在編寫一個具有功能模塊的nodejs / react應用，理想情況下，這些功能可以通過configuration.json文件進行打開和關閉。 功能模塊有一個入口來為它們的請求建立服務器端路由，並在React中建立一個客戶端路由。

服務器端配置工作正常。 在服務器啟動時，它會檢查配置設置，加載適當的模塊，並調用其register（）函數，以注冊其服務器端路由，控制器等。但是，當嘗試將Web捆綁包打包以部署到對於客戶端，我在嘗試遍歷要包含的模塊列表並將它們通過Web打包到要部署的捆綁包中時遇到問題。

到目前為止，我已經做了很多研究，但是webpack仍然很難理解。 我最近來的是在我的webpack.config.js文件中添加了一個部分，以將路由預加載到各個模塊，將其包含在捆綁包中以在客戶端上提供代碼，然后將其名稱粘貼到FEATURE_MODULES全局變量中通過DefinePlugin定義變量，並檢查React中是否存在該變量，以在這些模塊到達瀏覽器后嘗試加載和注冊（）。

到目前為止，該代碼似乎已添加到捆綁軟件中，並且模塊路徑已在該全局變量中正確傳遞給客戶端，但是嘗試在客戶端上使用require（）會引發有關找不到模塊的錯誤，最有可能是因為webpack正在用其查找映射的數字替換模塊名稱。

我也遇到過有關require.context和RegExp這些東西的事情，但這就是我開始迷路的地方。 有人可以給我提供示例或指向更易用的東西的鏈接，以演示如何完成此操作嗎？

Answer 1

無法100％清楚您正在做的事情正在打破（如果上述方法無濟於事，您可以發布具體細節嗎？），但是要遵循一般准則：

• Webpack將解析它在代碼中看到的所有require（）； 這是一個不是很“智能”的靜態解析器。 因此圍繞傳統需求的條件邏輯無法解決您的問題，因為所有需求都將被解析
• 如果您的條件檢查布爾變量（通常通過Define插件定義），則webpack解析器將理解它們，只有通過條件檢查的需求才會被解析。 然后，您可以使用Uglify插件的無效代碼消除功能來擺脫不需要的條件邏輯。
• “動態”需求通常不是一個好主意，因為它們會導致webpack將請求目錄中的每個文件捆綁在一起（因為它無法在構建時確定您要的是哪個文件）。 如果您要的是不存在的內容，則可能會遇到運行時錯誤（顯然，構建時錯誤更可取）。

以上內容將使您幾乎需要任何東西。 並且用數字替換文件路徑是webpack運行時的工作方式，因此，如果出現問題，則可能是錯誤的處理方式。

如果您似乎必須通過define插件定義太多標志，和/或設置太多條件邏輯，那么這些單獨的構建嗎？ 使用單個webpack配置文件來設置多個構建，並在它們之間重用共享的配置是非常容易的。