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

【问题标题】：How can I modify a lazy loaded Webpack module path?如何修改延迟加载的 Webpack 模块路径？
【发布时间】：2020-11-17 05:14:26
【问题描述】：

我有一个使用 Webpack 和动态导入的 Vue 应用：

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

mytoken 和 12345 在运行时生成。

我正在使用 webpack 4.44.0、vue 2.6.11 和 vue-loader 15.9.3。

【问题讨论】：

标签： javascript vue.js webpack

【解决方案1】：

根据this 和this 看来您不能在 webpack 4 中执行此操作。我不完全确定，但看起来 this pull request 可能允许在 webpack 5 中执行此操作。

【讨论】：