title: Webpack - Production how do you enable different file paths for <link href=""> and image paths in css files
body: <p>I will explain in more detail. </p>
  
  <pre><code>    module.exports = {
    build: {
      env: require('./prod.env'),
      index: path.resolve(__dirname, '../dist/index.html'),
      assetsRoot: path.resolve(__dirname, '../dist/'),
      assetsSubDirectory: 'assets',
      assetsPublicPath: './',
      productionSourceMap: true,
    }
  }
  </code></pre>
  
  <p>Above is my config setup for my webpack build. This works fine for the paths required for embedding assets such as CSS files into my index.html file. As seen in the below code:-</p>
  
  <pre><code>&lt;link href=./assets/css/app.345e4523874bd70b2f24b4356d30ed9e.css rel=stylesheet&gt;
  </code></pre>
  
  <p>But when looking at app.345e4523874bd70b2f24b4356d30ed9e.css of course webpack has built all the paths for images and fonts to be constructed like as follows:-</p>
  
  <pre><code>./assets/img/home-bg.jpg
  </code></pre>
  
  <p>Problem is I need to change all CSS related asset paths to ../img or ../fonts.</p>
  
  <p>I have tried so many things and looked online but can't seem to find a solution!? It must be so simple.</p>
  
  <p>Here is my folder structure. Thanks</p>
  
  <p>css
  img
  js
  index.html</p>