title: How to retrieve uncached versions of code splitting .js files using vue.js and webpack?
body: <p>So, I have Vue.js (using vue-cli and webpack) installed in my app.  Everything works great.  Also, I've implemented code splitting to so I don't have to load components that aren't being used until they are needed.  This all works fine, as well.  However, if I'm going to release a new version of my app, the code splitting .js files that are generated are going to be cached in the client browser and they won't get the updates until they clear their cache in their browser.</p>
  <p>To prevent this from happening before with the main.js, I implemented code splitting appended the version number in a querystring value on the main.js file that webpack builds like this:</p>
  <pre><code>&lt;script src=&quot;~/scripts/build/main.js?v=@ViewBag.VersionNumber&quot; asp-append-version=&quot;true&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>After adding the code splitting, I now get the main.js file plus four extra .js files but I'm not sure how to version those auto-created .js files that the main.js file references.</p>
  <p>main.js
  0.js
  1.js
  2.js
  3.js</p>
  <p>I can easily name those by using the magic comments supported in webpack like this:</p>
  <pre><code>const page0 = ()=&gt; import(/* webpackChunkName: &quot;my-page-0&quot; */ './components/MyPage0.vue');
  const page1 = ()=&gt; import(/* webpackChunkName: &quot;my-page-1&quot; */ './components/MyPage1.vue');
  const page2 = ()=&gt; import(/* webpackChunkName: &quot;my-page-2&quot; */ './components/MyPage2.vue');
  const page3 = ()=&gt; import(/* webpackChunkName: &quot;my-page-3&quot; */ './components/MyPage3.vue');
  </code></pre>
  <p>But I don't know how to make the names dynamic so that I can append a version or a hash or something that will force the browser to retrieve the uncached version after a software update has been made.</p>