How to choose plugin hooks about analyze source code dependencies

[yangguansen]

I have a question, please help me. I had ask questions on StackOverflow(https://stackoverflow.com/questions/71389265/webpackhow-to-choose-plugin-hooks-about-analyze-source-code-dependencies) and Gitter, but nobody answer me.

Question:
I want to make a webpack plugin about analyze source code dependencies,it can generate depend tree to img from entry file. How to choose hooks about analyze source code dependencies? There are so much hooks in documents.

I tried code like this

const pluginName = 'TestPlugin';
let currentFile;
const array = [];
let node = {};

class TestPlugin {
  apply(compiler) {
    compiler.hooks.normalModuleFactory.tap(pluginName, (factory) => {
      factory.hooks.parser
        .for('javascript/auto')
        .tap(pluginName, (parser, options) => {
          parser.hooks.import.tap(pluginName, (statement, source) => {
            if (parser.state.current.resource.includes('node_modules')) {
              return;
            }

            const { rawRequest: fileName, resource: filePath } = parser.state.current;
            if (filePath !== currentFile) {
              currentFile = filePath;
              if (JSON.stringify(node) !== '{}') {
                array.push(node);
              }
              node = {
                name: fileName,
                path: filePath,
                children: []
              };
            }
            node.children.push({ name: source, value: source });
          });
        });

    // end
    compiler.hooks.compilation.tap(pluginName, (compilation) => {
      compilation.hooks.finishModules.tap(pluginName, (modules) => {
        debugger;
        console.log(modules);
      })
    })
  }
}

module.exports = TestPlugin;

Now I have the flatter array, But I could't take the array to tree. Can anybody help me?

[vankop]

if you need some work with ast you need parser hooks.

Now I have the flatter array, But I could't take the array to tree. Can anybody help me?

you should use module graph for that. something like

for (const [ name, { dependencies: deps}] of compilation.entries) {
  const dep = deps[deps.length - 1];
  const module = compilation.moduleGraph.getModule(dep);
  const connections = compilation.moduleGraph.getOutgoingConnections(module);
  // visit modules in connections
}

[yangguansen]

And I check async module in route module, it's ImportDenpendenciedBlock

in all my sync module, the module's blocks array is empty,
like this:

so what the difference between import async module and import sync module?

[yangguansen]

And I check the compilation source code, there isn't moduleGraph method...

[yangguansen]

Oh man, getOutgoingConnections is webpack 5, but I use webpack 4.

[yangguansen]

Maybe I should find some call methods in lib/ModuleGraph.js

[yangguansen]

Oh bro, module doesn't has ModuleGraph class, right? I'm crazy