如何在多頁PHP應用程序中集成Webpack

Question

我正在使用一個舊的Codeigniter網站，其中Javascript代碼庫很亂，結構很差，我想使用Webback來管理腳本。 我的目標是開始使用它來捆綁我擁有的代碼，並逐步重構它以利用模塊和導入。

目前我正在開發中使用Gulp（但主要用於縮小文件）和Carabiner （Codeigniter庫）以在視圖中插入腳本。

這些腳本都是作為IIFE編寫的，不是捆綁在一起的，因此在每個控制器函數中，我都有一個該頁面所需的腳本數組。 例如：

public function homepage()
{
    $this->carabiner->js([
        ['libraryThatIOnlyNeedHere.min.js'],
        ['myscript1.js'],
        ['myscript2.js'],
        ['myscript3.js'],
    ]);

我想使用Webpack創建一系列包，這樣我最終會在每個頁面上加載最多兩個文件：一個用於庫，一個用於我的腳本。

但是，我在Webpack中看到的所有實際例子都是針對單頁應用程序，將所有內容捆綁在一起非常容易。

在我的案例中，最好的方法是什么？ 考慮到代碼仍未准備好正確使用模塊和導入，我是否應該在Webpack配置文件中創建許多入口點，可能每個頁面都有一個入口點並列出該頁面中所需的每個腳本？

Answer 1

webpack背后的主要思想是從提供的源構建模塊圖，然后將其組合成bundle。 如果您的代碼沒有明確的依賴關系 - 最好先使用任何可用的方法（AMD，CommonJS等）從每個文件創建一個模塊。 您需要創建模塊標識符並為每個模塊定義依賴關系。 例如，閱讀本文可能是值得的。

作為中間步驟，您可能希望使用某些加載程序（如Require.JS）來加載模塊化代碼。

在此步驟完成之前 - Webpack沒有太多用處。