Automatically generating Webpack chunk names for dynamic imports

Question

I would like my webpack-generated JS chunk files to have the same name as the source filename. I know I can achieve this by explicitely adding a magic comment like so:

 import(/* webpackChunkName: "some-name" */ '@/components/profile/someName'),

but as we have hundreds of imports, I am looking for a way to do this via configuration instead.

Answer 1

If you did your code splitting right, Webpack automatically generate the chunk with this format src_[components-directory]_[component-file-name]_[component-extension].chunk.js

for example you want to load src/pages/about-us.tsx, your chunk src_pages_about_us_tsx.chunk.js