使用Webpack生成具有资产相对路径的HTML

我有以下src文件夹结构：

/src
+-- /app
|   +-- index.js
|   +-- /templates
|       +-- index.html
|       +-- /subfolder
|           +-- nested.html
|
+-- /images
|   +-- webpack.png
| 
+-- /styles
|   +-- index.scss

我正在尝试配置webpack，以便使用应用程序文件夹中的模板发送多个html文件。最终生成文件夹结构应如下所示：

/build
+-- /images
|   +-- webpack.png
|
+-- /subfolder
|   +-- nested.html
|
+-- index.html
+-- bundle.js
+-- styles.css

问题是，在构建之后，

index.html

和

nested.html

具有相同的图像路径

，这对于

nested.html

nested.html

应具有以下路径-

如何使webpack为嵌套html文件设置正确的资产路径

---

复制步骤。

下载

安装软件包

npm安装

运行

npm运行构建

根据该线程，html加载程序没有问题-

Webpack文档提到组件之间的资产共享，但未提供示例-

html加载器选项可能对此有解决方案，但文档对我来说没有多大意义，我无法理解-

---

我在下面的文章中动态生成了htmlWebpackPlugin-

今天早上我又看了一眼，我有了一种做你不想做的事情的方法，尽管它并不完美

如果您将图像文件夹移动到模板文件夹，并更新HTML+SCS中的URL以匹配

更改图像的文件加载程序设置，以便将其放入与源目录同名的目录中

... { loader: "file-loader", options: { name: "[name].[ext]", // outputPath: "img/" // Use same name as source outputPath: "images/" } } ... ... { 加载器：“文件加载器”， 选项：{ 名称：“[name].[ext]”， //输出路径：“img/” //使用与源相同的名称 输出路径：“图像/” } } ... 向walk函数添加一个测试，以便它只包含模板目录中的html文件，这样我们就不会在尝试使用HtmlWebpackPlugin处理图像时出错

... if (isDirectory) { // File is a directory ... code ... } else if (/\.html$/.test(file)) { ... code ... } ... ... 国际单项体育联合会（isDirectory）{ //文件是一个目录 …代码。。。 }else if（/\.html$/.test（文件））{ …代码。。。 } ... 并删除html加载程序，因为它正在重写图像URL，破坏它们的相对路径

通过这些更改，Webpack将在您的img标签中保留相对URL。它还将创建正确的结构，以便在构建目录中工作。这些图像也将在CSS中工作，整个过程也是从构建/根目录加载的

---

这并不是一个完美的解决方案，它会像Webpack中的许多其他东西一样自动工作。但至少在你找到更好的方法之前，它现在应该能满足你的需求。

谢谢你的回复。我考虑过类似的方法，它对任何比小型多页应用程序更大的应用程序都不起作用。我猜webpack并不是专门为处理这种设置而设计的。干杯