如何在多页面 PHP 应用程序中集成 Webpack答案

【问题标题】：How to integrate Webpack in a multi-page PHP application如何在多页面 PHP 应用程序中集成 Webpack
【发布时间】：2018-04-16 00:37:14
【问题描述】：

我在一个旧的 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 配置文件中创建许多入口点，可能每个页面一个并列出该页面所需的每个脚本？

【问题讨论】：

您需要为每个页面创建一对不同的捆绑包，这将是一场真正的噩梦。作为第一步，您应该制作 2 个捆绑包，1 个用于通用库，1 个用于通用脚本。然后每个单独的页面都可以加载额外的脚本。否则，您唯一的选择是为每条路线配备成对的捆绑包。
一场真正的噩梦，因为我必须定义很多入口点？如果这是主要问题，我不介意这样做。我想这将是几个小时的问题
基本上，一个解决方案是创建类似“scripts.bundle.homepage.min.js”和“vendor.bundle.homepage.min.j”（名称很难）的东西，这适用于每个页面那需要JS。您可能可以修改使用 gulp 和 webpack 并将捆绑包作为您的 gulp 过程的一部分。然后，您需要修改每个控制器路由以提供捆绑包而不是原始脚本文件。
但在某些时候我还是应该修改控制器。我认为每个页面的共同代码并不多，所以我想最好有单独的捆绑包
另外看看Laravel Mix它提供了一些不错的功能，你不一定需要laravel来使用它

标签： javascript php codeigniter webpack gulp

【解决方案1】：

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

作为中间步骤，您可能希望使用诸如 Require.JS 之类的加载器来加载您的模块化代码。

在这一步完成之前 - 没有太多使用 Webpack。

【讨论】：

我知道这一点，但我不知道是否值得使用一项新技术（AMD、通用等），然后再将其丢弃。另外，只是为了确保我理解：如果我使用 CommonJS 创建模块，我仍然应该进入每个控制器并更改我包含的 JS 文件。用 webpack 创建显式的 bundle 并在之后重构代码会不会很糟糕？
@Carlo webpack 将查看您将为其提供的入口点，并将搜索对其他模块的引用到源代码中。遗留代码显然没有这样的引用（因为它们是隐式的），因此您的包将由单个模块组成 - 非常没用。你需要为 webpack 提供一种构建模块图的方法，使用任何可用的方法（AMD、CommonJS、原生 JS 模块或其他任何东西，webpack 都有加载器）。但是为每个模块建立显式依赖关系的步骤是必要的。 Webpack 稍后会自行转换你的模块，所以不用担心
感谢您的回答和信息。我对您提供的信息进行了更多研究，发现这篇文章 (medium.com/eventmobi/…) 描述了一种逐渐切换到 Webpack 的方法，似乎完全符合我的需求