title: Vue webpack dynamic import with require not working
body: <p>I'm building an app that plays different sounds, I made a NoiseMix component that will have many Noise components. Each Noise should have its own url parameter to load the actual mp3 but I'm having troubles with the static files.</p>
  <p>in NoiseMix I have this data:</p>
  <pre class="lang-js prettyprint-override"><code>data: () =&gt; {
      return {
          sounds: [
              {   id: 1,
                  url: &quot;/assets/sounds/rain.mp3&quot;,
                  icon: &quot;fas fa-cloud-rain&quot;,
                  name: &quot;Rain&quot;,
                  volume: 50
              }, {
                  id: 2,
                  url: &quot;/assets/sounds/rain.mp3&quot;,
                  icon: &quot;fas fa-wind&quot;,
                  name: &quot;Wind&quot;,
                  volume: 50
              }, {
                  id: 3,
                  url: &quot;/assets/sounds/rain.mp3&quot;,
                  icon: &quot;fas fa-water&quot;,
                  name: &quot;Waves&quot;,
                  volume: 75
              }
          ]
      }
  },
  </code></pre>
  <p>And my Noise Component looks like this:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;div class=&quot;single-noise&quot;&gt;
          &lt;div class=&quot;single-noise__icon&quot;&gt;
              &lt;i :class=&quot;icon&quot;&gt;&lt;/i&gt;&lt;br /&gt;
          &lt;/div&gt;
          &lt;div class=&quot;single-noise__content&quot;&gt;
              ID: {{id}}&lt;br /&gt;
              Name: {{name}}&lt;br /&gt;
              Sound URL: {{url}}&lt;br /&gt;
              Volume: {{volume}}&lt;br /&gt;
              &lt;input type=&quot;range&quot; min=&quot;0&quot; max=&quot;100&quot; name=&quot;&quot; v-model=&quot;volume&quot;&gt;&lt;br /&gt;
              audio:
              &lt;audio controls&gt;
                  &lt;source :src=&quot;trackUrl&quot; type=&quot;audio/mpeg&quot;&gt;
              &lt;/audio&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      name: &quot;Noise&quot;,
      props: {
          url: String,
          icon: String,
          name: String,
          id: Number,
          volume: Number,
      },
      computed: {
          trackUrl () {
              // THIS LINE IS THE PROBLEM
              // If I use require('@' + this.url); the app doesn't load at all and there's no error
              return require('@' + '/assets/sounds/rain.mp3');
          }
      }
  }
  &lt;/script&gt;
  </code></pre>