如何修改延迟加载的 Webpack 模块路径？

Question

I have a Vue app which uses Webpack and dynamic imports:

// App.vue
<template>
  <div>
    <button @click="isBtnClicked = true">Load lazy component</button>
    <LazyComponent v-if="isBtnClicked" />
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
    LazyComponent: () => import('./components/LazyComponent'),
  },
  data: () => {
    return {
      isBtnClicked: false,
    }
  }
}
</script>

// components/LazyComponent.vue
<template>
    <p>Hello from lazy component</p>
</template>

When the button in the app is clicked, the Webpack runtime dynamically creates a <script> tag and appends it to the head of the document.

Is there a way to modify the src attribute of this generated <script> tag? I would like to add a dynamic query parameter to it appends the element to the DOM.

The currently generated tag looks something like:

<script charset="utf-8" src="/js/0.js"></script>

And I would like it to look like:

<script charset="utf-8" src="/js/0.js?mytoken=12345"></script>

where mytoken and 12345 are generated at runtime.

I am using webpack 4.44.0, vue 2.6.11, and vue-loader 15.9.3.

Answer 1

According to this and this it doesn't look like you can do this in webpack 4. I'm not entirely sure, but it looks like this pull request may allow it to be done in webpack 5.