How can I get chunk nested modules with Webpack?

  Kiến thức lập trình

I have a React application. Pages in the application are named webpack chunks:

import(/* webpackChunkName: "pageA" */ './pageA')
import(/* webpackChunkName: "pageB" */ './pageB')
import(/* webpackChunkName: "pageC" */ './pageC')

Every page has some dependencies:

// pageA.tsx
import 'moduleA'
import 'moduleB'

Every module has some dependencies:

// moduleA.tsx
import 'moduleA_a'
import 'moduleA_b'

I need to create a dependency tree for each page:

pageA
  moduleA
    moduleA_a
    moduleA_b
  moduleB
    moduleB_c
PageB
  moduleC
     moduleC_a
       moculeC_a1
  moduleD

How to do it using Webpack API? I tried stats.compilation.ChunkGraph.getModules() to get root modules. And stats.compilation.ModuleGraph.getOngoingConnections() to get dependencies for each module.

const pageChunk = stats.compilation.namedChunks.get('PageA')
const rootModules = stats.compilation.ChunkGraph.getModules(pageChunk)
cosnt deps = stats.compilation.ModuleGraph.getOngoingConnections(rootModules[0])

But it does not work as I need. stats.compilation.ChunkGraph.getModules() does not return root modules. It looks like it returns all modules in chunk.

LEAVE A COMMENT