webpack - 使用 Webpack 生成具有 Assets 相对路径的 HTML

Question

我有以下 src 文件夹结构:

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

我正在尝试将 webpack 配置为使用 app 文件夹中的模板发出多个 html 文件。最终的构建文件夹结构应如下所示:

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

问题是在构建之后，index.html和 nested.html与图像具有相同的路径 <img src="img/webpack.png">这对于 nested.html 是不正确的

nested.html应具有以下路径 - <img src="../img/webpack.png"> .

如何让 webpack 为嵌套的 html 文件设置正确的 Assets 路径？

---

重现步骤。

1. 下载repo
2. 安装包 npm install
3. 运行 npm run build

my webpack.config.js

my package.json

根据此线程，html-loader 不是问题 - https://github.com/webpack-contrib/file-loader/issues/272

Webpack 文档提到了组件之间的 Assets 共享，但没有提供示例 - https://webpack.js.org/guides/asset-management/#global-assets

html-loader 选项可能有一个解决方案，但文档对我来说意义不大，我无法弄清楚 - https://webpack.js.org/guides/asset-management/#global-assets

我正在关注动态生成 htmlWebpackPlugin 的文章 - https://extri.co/2017/07/11/generating-multiple-html-pages-with-htmlwebpackplugin/

Answer 1

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

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

更改图像的文件加载器设置，以便将它们放在与源目录同名的目录中。

  ...
  {
    loader: "file-loader",
    options: {
      name: "[name].[ext]",
      // outputPath: "img/" 
      // Use same name as source
      outputPath: "images/" 
    }
  }
  ...

向 walk 函数添加一个测试，使其仅包含模板目录中的 html 文件，这样我们在尝试使用 HtmlWebpackPlugin 处理图像时就不会出错。

  ...
  if (isDirectory) {
        // File is a directory
        ... code ...
      } else if (/\.html$/.test(file)) {
        ... code ...
      }
  ...

并删除 html-loader，因为它正在重写图像 url，破坏它们的相对路径。

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

这不是一个完美的解决方案，如果它能像 Webpack 中的许多其他东西一样自动工作会很好。但它现在应该可以完成您想要的，至少在您找到更好的方法之前是这样。