title: Generating HTML with relative path to assets using Webpack
body: <p>I have the following src folder structure:</p>
  
  <pre><code>/src
  +-- /app
  |   +-- index.js
  |   +-- /templates
  |       +-- index.html
  |       +-- /subfolder
  |           +-- nested.html
  |
  +-- /images
  |   +-- webpack.png
  | 
  +-- /styles
  |   +-- index.scss
  </code></pre>
  
  <p>I am trying to configure webpack to emit multiple html files using templates from app folder. The final build folder structure should look something like this:</p>
  
  <pre><code>/build
  +-- /images
  |   +-- webpack.png
  |
  +-- /subfolder
  |   +-- nested.html
  |
  +-- index.html
  +-- bundle.js
  +-- styles.css
  </code></pre>
  
  <p>The problem is that after building, <code>index.html</code> and <code>nested.html</code> have the same path to the image <code>&lt;img src="img/webpack.png"&gt;</code> which is incorrect for <code>nested.html</code></p>
  
  <p><code>nested.html</code> should have the following path - <code>&lt;img src="../img/webpack.png"&gt;</code>.</p>
  
  <p>How can I make webpack set correct path to assets for nested html files ?</p>
  
  <hr>
  
  <p><strong>Steps to reproduce.</strong></p>
  
  <ol>
  <li>Download the <a href="https://github.com/viktorhbk/web-boilerplate/tree/stack-overflow-snapshot" rel="nofollow noreferrer">repo</a></li>
  <li>Install packages <code>npm install</code></li>
  <li>Run <code>npm run build</code></li>
  </ol>
  
  <p><a href="https://gist.github.com/viktorhbk/14826a164cc8d25826110d949ce067c6" rel="nofollow noreferrer">my webpack.config.js</a></p>
  
  <p><a href="https://gist.github.com/viktorhbk/99ff1dcee86786b5a25b30ab1e0145d5" rel="nofollow noreferrer">my package.json</a></p>
  
  <p>According to this thread it is not a problem with html-loader - <a href="https://github.com/webpack-contrib/file-loader/issues/272" rel="nofollow noreferrer">https://github.com/webpack-contrib/file-loader/issues/272</a></p>
  
  <p>Webpack docs mention assets sharing between components but provides no examples - <a href="https://webpack.js.org/guides/asset-management/#global-assets" rel="nofollow noreferrer">https://webpack.js.org/guides/asset-management/#global-assets</a></p>
  
  <p>html-loader options may have a solution to this but docs doesn't make much sense to me and I can't figure it out - <a href="https://webpack.js.org/guides/asset-management/#global-assets" rel="nofollow noreferrer">https://webpack.js.org/guides/asset-management/#global-assets</a></p>
  
  <p>Article I was following to generate htmlWebpackPlugin dynamically - <a href="https://extri.co/2017/07/11/generating-multiple-html-pages-with-htmlwebpackplugin/" rel="nofollow noreferrer">https://extri.co/2017/07/11/generating-multiple-html-pages-with-htmlwebpackplugin/</a></p>