3

我有以下 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 文件设置正确的资产路径？

重现步骤。

  1. 下载回购
  2. 安装包npm install
  3. 跑npm run build

我的 webpack.config.js

我的 package.json

根据这个线程，html-loader 没有问题 - https://github.com/webpack-contrib/file-loader/issues/272

Webpack 文档提到组件之间的资产共享，但没有提供示例 - 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/

4

1 回答 1

0

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

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

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

  ...
  {
    加载器：“文件加载器”，
    选项： {
      名称：“[名称]。[分机]”，
      // 输出路径：“img/”
      // 使用与源相同的名称
      输出路径：“图像/”
    }
  }
  ...

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

  ...
  如果（是目录）{
        // 文件是一个目录
        ... 代码 ...
      } else if (/\.html$/.test(file)) {
        ... 代码 ...
      }
  ...

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

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

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

于 2018-09-19T12:10:42.170 回答