Get Webpack chunk url as string when using dynamic imports

Question

With Webpack I can load a module like this:

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

However I would only like to get the URL of the chunk, not actually load it. Is that possible?

I haven't actually tried chunking in webpack but I thought it placed some specific requirements on the output structure such that the chunks are all located relative to each other, in which case could you not derive moduleName's url from the script you're currently in? — Rhys
– Rhys, Commented Feb 28, 2018 at 11:19
My actual code uses promise loader and "dir/" + someVar. Loading the module works fine. Webpack generates an ID for the chunk, but I'm not sure how to get that id. — Matt Zeunert
– Matt Zeunert, Commented Feb 28, 2018 at 12:14

Alfredo Lopez · Accepted Answer · 2022-06-15 02:06:00Z

2

You can do this in Webpack 5 by re-using the Worker Plugin with module.parser.

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

Webpack config:

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

Example usage:

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

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

The file will go through a child compiler like a dynamic import, but only the URL is returned.

answered Jun 15, 2022 at 2:06

Alfredo Lopez

213 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

surprisingly, this works. but how can I preserve the existing handling of new Worker(new URL(...))?