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

Question

我有一个Vue应用程序，它使用Webpack和动态导入：

// 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>

单击应用程序中的按钮时，Webpack运行时会动态创建一个<script>标记，并将其附加到文档的head。

有没有办法修改这个生成的<script>标签的src属性？我想在其中添加一个动态查询参数，将元素附加到DOM中。

当前生成的标签看起来像：

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

我希望它看起来像：

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

其中CCD_ 5和CCD_。

我使用的是webpack 4.44.0、vue 2.6.11和vue加载程序15.9.3。

Answer 1

根据这个和这个，在webpack 4中似乎无法做到这一点。我不完全确定，但看起来这个pull请求可能允许在webpack 5中完成。