javascript - 使用动态导入时将 Webpack block url 作为字符串获取

Question

使用 Webpack，我可以加载这样的模块:

import(moduleName).then(_ => {})

但是我只想获取 block 的 URL，而不是实际加载它。那可能吗？

Answer 1

你可以在 Webpack 5 中通过重用 Worker Plugin 来做到这一点。使用 module.parser。

// utils/chunk-url.js
export function ChunkUrl(url) { return url; }

网络包配置:

webpackConfig.module = {
  parser: {
    javascript: {
      worker: ["ChunkUrl from ~/utils/chunk-url", "..."]
    }
  }
}

示例用法:

import { ChunkUrl } from '~/utils/chunk-url';

// .../chunks/[hash].js
const ScriptUrl = new ChunkUrl(new URL('/path/to/file.js', import.meta.url)); 

该文件将像动态导入一样通过子编译器，但仅返回 URL。