title: How to specify where to inject chunks in html template with vue-cli?
body: <p>I am using vue-cli generated project and specified <code>pages</code> in <code>vue.config.js</code>. Vue is automatically injecting the JS chunks at the end of the HTML template file. But in I need to specify a different location to place them in that file.</p>
  
  <p>Standard Webpack syntax does not really help (<code>&lt;%= htmlWebpackPlugin ...</code>). It actually injects the chunks there, but then the chunks are again inserted at the end of the page anyway.</p>
  
  <p>Is there a correct way, how specify exact place in HTML file for building with vue-cli, instead of the default end of the file (or before  which does not exist in my template)? </p>
  
  <p><strong>Template (IndexTemplate.cshtml)</strong></p>
  
  <pre><code>...
  
  &lt;scripts-section&gt;
      &lt;% for (var chunk in htmlWebpackPlugin.files.chunks) { %&gt;
      &lt;script src="&lt;%= htmlWebpackPlugin.files.chunks[chunk].entry %&gt;"&gt;&lt;/script&gt;&lt;% } %&gt;
  
  &lt;/scripts-section&gt;
  </code></pre>
  
  <p><strong>Generated File (Index.cshtml)</strong></p>
  
  <pre><code>...
  
  &lt;scripts-section&gt;
      &lt;script src="/dist/vue/runtime.js"&gt;&lt;/script&gt;
      &lt;script src="/dist/vue/sentry.vendor.js"&gt;&lt;/script&gt;
      &lt;script src="/dist/vue/axios.vendor.js"&gt;&lt;/script&gt;
      &lt;script src="/dist/vue/vue.vendor.js"&gt;&lt;/script&gt;
      &lt;script src="/dist/vue/vendors~Search.js"&gt;&lt;/script&gt;
      &lt;script src="/dist/vue/Search.js"&gt;&lt;/script&gt;
  
  &lt;/scripts-section&gt;
  
  &lt;script type="text/javascript" src="/dist/vue/runtime.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="/dist/vue/sentry.vendor.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="/dist/vue/axios.vendor.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="/dist/vue/vue.vendor.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="/dist/vue/vendors~Search.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="/dist/vue/Search.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>As you can see, it gets inserted twice. Having it at the end of the file is not an option here.</p>
  
  <p><strong>vue.config.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>module.exports = {
      publicPath: '/dist/vue/',
      outputDir: './wwwroot/dist/vue/',
      runtimeCompiler: true,
      pages: {
          Search: {
              entry: 'Frontend/vue/Search/main.ts',
              template: 'Views/Mentors/IndexTemplate.cshtml',
              filename: '../../../Views/Mentors/Index.cshtml',
              chunks: ['runtime', 'vue.vendor', 'axios.vendor', 'sentry.vendor', 'Search', 'vendors~Search']
          }
      },
      chainWebpack: config =&gt; {
          config.optimization
              .runtimeChunk('single')
              .splitChunks({
                  chunks: 'all',
                  cacheGroups: {
                      vue: {
                          test: /[\\/]node_modules[\\/](.*vue.*)[\\/]/,
                          name: 'vue.vendor',
                          chunks: 'all',
                      },
                      // ...
                  }
              });
      }
  }
  
  </code></pre>
  
  <p>I expect, that the JS chunks would be injected only in the <code>&lt;scripts-section&gt;</code> element.</p>