Javascript 如何在多页PHP应用程序中集成Webpack

我正在一个旧的Codeigniter网站上工作，那里的Javascript代码库凌乱且结构不良，我想使用Webback来管理脚本。我的目标是开始使用它来捆绑我现有的代码，并逐步重构它以利用模块和导入

目前，我正在使用Gulpon开发（但主要是缩小文件）和（Codeigniter库）在视图中插入脚本

这些脚本都是作为IIFE编写的，它们并没有捆绑在一起，所以在每个控制器函数中，我都有一系列该页面所需的脚本。例如：

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

我想使用Webpack创建一系列捆绑包，以便在每个页面上最多加载两个文件：一个用于库，另一个用于脚本

不过，我看到的所有Webpack实用示例都是针对单页应用程序的，在这些应用程序中，很容易将所有内容捆绑在一起

---

对我来说，什么是最好的方法？考虑到代码还没有准备好正确使用模块和导入，我是否应该在Webpack配置文件中创建多个入口点，每个页面可能创建一个入口点，并列出该页面所需的每个脚本？

Webpack背后的主要思想是从提供的源代码构建模块图，然后将其组合成捆绑包。如果您的代码没有明确的依赖关系，那么最好从使用任何可用方法（AMD、CommonJS等）从每个文件创建模块开始。您需要为每个模块创建模块标识符并定义依赖项。例如，它可能值得一读

作为中间步骤，您可能希望使用一些加载程序来加载模块化代码

---

在完成此步骤之前，Webpack没有太多用途。

您需要为每个页面创建一对不同的捆绑包，这将是一场真正的噩梦。作为第一步，您应该创建2个捆绑包，1个用于公共库，1个用于公共脚本。然后，每个页面都可以加载其他脚本。否则，您唯一的选择就是为每条路线提供成对的捆绑包。这真是一场噩梦，因为我必须定义很多入口点？如果这是主要问题，我不介意这么做。我想这将是一个几个小时的问题，基本上一个解决方案将是创建类似“scripts.bundle.homepage.min.js”和“vendor.bundle.homepage.min.j”（名称很难）的内容，这是针对每个需要js的页面的。您可能可以修改use gulp with webpack，并将捆绑包作为gulp过程的一部分。然后，您需要修改每个控制器路由以服务于捆绑包，而不是原始脚本文件。我认为每个页面的共同代码并不多，所以我想最好有单独的捆绑包。另外，看看它提供了一些很好的功能，你不一定需要laravel来利用itI。我知道这一点，但我不知道是否值得使用一种新技术（AMD、common等），只是后来放弃它。另外，为了确保我理解：如果我使用CommonJS创建模块，我仍然应该进入每个控制器并更改我包含的JS文件。使用webpack创建显式捆绑包并随后重构代码是否会如此糟糕？@Carlo webpack将查看您将提供给它的入口点，并在源代码中搜索对其他模块的引用。遗留代码显然没有这样的引用（因为它们是隐式的），因此您的包将由单个模块组成——非常无用。您需要使用任何可用的方法（AMD、CommonJS、原生JS模块或webpack提供的任何其他方法）为webpack提供一种构建模块图的方法。但是为每个模块建立显式依赖关系的步骤是必要的。Webpack稍后会自动转换您的模块，所以不要担心。谢谢您的回答和信息。我对你提供的信息做了更多的研究，我发现这篇文章（）描述了一种逐渐切换到Webpack的方法，它似乎非常适合我的需要