title: Webpack.Mix won't compile image urls from Vue components for production
body: <p>I want to compile <code>image urls</code> from <code>resources/images</code> dir to <code>public/images</code> dir  for production (<code>npm run prod</code>) but the only way I've been able to do so is to compile them from <code>css</code> files.</p>
  <p><a href="https://laravel.com/docs/8.x/mix" rel="nofollow noreferrer">Compile Assets Doc</a> says that:</p>
  <ol>
  <li>Only <code>urls</code> inside <code>css</code> files will be compiled</li>
  <li>To enable compilation for <code>vue</code> components, I need to add <code>.vue()</code> at the end of <code>mix.js()</code> inside <code>webpack.mix.js</code></li>
  </ol>
  <p>This is my <code>webpack.mix.js</code> file:</p>
  <pre><code>const mix = require('laravel-mix');
  
  mix.js('resources/js/app.js', 'public/js')
      .postCss('resources/css/app.css', 'public/css', []).vue();
  </code></pre>
  <p>but no images inside of <code>vue</code> components are being compiled. I <strong>have</strong> to put the <code>urls</code> inside <code>css</code> to make it work. Am I doing it wrong?</p>