title: Laravel Mix/Webpack Directory Prefix
body: <p>My current webpack config is:</p>
  
  <pre><code>mix.webpackConfig({
      output: {
          chunkFilename: "[name].js?ver=[chunkhash:8]",
          filename: "[name].js",
      }
  });
  
  mix.js('resources/js/app.js', 'public/js')
     .sass('resources/sass/app.scss', 'public/css')
     .sass('resources/sass/web.scss', 'public/css/web.css')
     .options({
        processCssUrls: false,
         uglify: {
             uglifyOptions: {
                 warnings: false,
                 comments: false,
                 beautify: false,
                 sourceMap: true,
                 compress: {
                     warnings: false,
                     conditionals: true,
                     unused: true,
                     comparisons: true,
                     sequences: true,
                     dead_code: true,
                     evaluate: true,
                     if_return: true,
                     join_vars: true,
                     drop_debugger: true
                 },
                 output: {
                     comments: false
                 },
             }
         }
      }).version().sourceMaps();
  
  mix.extract(['vue', 'jquery','vue-awesome-swiper', 'bootstrap', 'lodash', 'vue-pluralize', 'vue-read-more', 'vue-sticky-directive', 'vue-waypoint']);
  </code></pre>
  
  <p>When I run npm watch or npm production it creates dozens of javascript files in the public directory such as 11.js or 19.js.  Even with the ?ver= argument, we still have issues with some browsers caching the javascript and not updating when changes are made.</p>
  
  <p>We had this problem with the vendor and manifest files in the past, so one way we fixed that in Laraval was:</p>
  
  <pre><code>&lt;script src="/cache-bust-{{ \Cache::remember('cache-bust_' . md5(mix('/js/manifest.js')), 60, function () { return md5(mix('/js/manifest.js')); }) }}{{ mix('/js/manifest.js') }}"&gt;&lt;/script&gt;
  &lt;script src="/cache-bust-{{ \Cache::remember('cache-bust_' . md5(mix('/js/vendor.js')), 60, function () { return md5(mix('/js/vendor.js')); }) }}{{ mix('/js/vendor.js') }}"&gt;&lt;/script&gt;
  &lt;script src="/cache-bust-{{ \Cache::remember('cache-bust_' . md5(mix('/js/app.js')), 60, function () { return md5(mix('/js/app.js')); }) }}{{ mix('/js/app.js') }}"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>And then adding this rewrite in apache conf:</p>
  
  <pre><code>RewriteRule ^cache-bust-(.*)/js/(.*)$ /js/$2 [L]
  </code></pre>
  
  <p>So a request might come in looking for:</p>
  
  <pre><code>&lt;script src="/cache-bust-e8504524e2eb05e2daa34d6cbb91dd4c/js/manifest.js?id=be4f23f7f36b3345edf2"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>And Apache routes it properly and does a 100% better job at cache busting.</p>
  
  <p>We would like to do the same thing with these little js files such as 11.js.  Keep in mind I do not want to actually change the chunkFilename or filename because when you do that and base the name on the chunkhash for example, then every time you recompile, the old js files with the old chunkhash name remain.</p>
  
  <p>What I want to do is put a directory prefix in front of where 11.js is called.  I can't seem to find what tells mix to put these files directly into the public directory?  Ideally I would want some kind of configuration that would say something like:</p>
  
  <pre><code>urlPath: "cache-js-bust-[chunkhash:8]/[chunkFilename]"
  </code></pre>
  
  <p>Then a rewrite:</p>
  
  <pre><code> RewriteRule ^cache-js-bust-(.*)/(.*)$ /$2 [L]
  </code></pre>
  
  <p>Any thoughts?</p>