Webpack资产处理：将index.php中的src语句转换为需求调用

问题描述

我正在开发一个具有PHP后端和JavaScript前端的项目。

前端完全用香草JavaScript编写，但是我的应用程序的起始页是一个index.php文件（而不是index.html）。 index.php基本上是一个HTML文件，在PHP块中具有一些非常简单的PHP函数。 webpack不需要解释PHP标记内的任何内容。在html主体内部，我使用了一些src语句来加载资产（图像和自定义格式的一些模板）。

index.php示例（伪代码）：

<?php
  require_once('../server/someFile.php');

  somethingSimple();

  function somethingSimple() {
    /* does something very simple */
  }
?>

<!DOCTYPE html>
<html lang=en>

<head>
  <meta charset=UTF-8>
  <title>Example</title>
</head>

<body>
  <div id=someContainer>
    <img src="pathToSomeImage"/>    <!-- this is causing trouble -->
  </div>
</body>
</html>

如何通过Webpack自动将index.php中的src语句转换为需求调用？（因此文件加载器可以处理这些需求调用并将引用的文件复制到构建目录中）

更多细节：

这是我第一次使用webpack。除了index.php之外，其他所有内容都非常标准。我使用 HtmlWebpackPlugin 将template.php文件转换为index.php并注入散列的包。一切正常。

我还注意到，手动插入的require调用会正确触发我的文件加载器：

  <div id=someContainer>
    <img src=<%- require("pathToSomeImage") %/>     <!-- this is working -->
  </div>

由于大多数内容都按预期运行，因此我确信我的webpack配置基本上是正确的。

但是

对于仅用于html的首页，webpacks html-loader 将解析index.html的src语句，并将其转换为require调用（对吗？）。我无法将其与php文件一起使用。

我如何制定规则以使用适当的加载程序检查php文件（甚至更好的是我的index.php），以自动将src语句转换为require调用？

预先感谢

基督徒

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript webpack webpack webpack-file-loader webpack-html-loader

Webpack资产处理：将index.php中的src语句转换为需求调用

问题描述

解决方法

相关问答