javascript - Webpack 插件解析器找不到本地或模块函数调用

Question

我正在编写一个代码分析 webpack 插件，它想要在 webpack 包中查找函数名称的所有实例。

我为这个问题做了一个 repo :https://github.com/RonPenton/webpack-parser-fail-demo

所以解析器非常简单，看起来像这样:

    class ParsePlugin {
    apply(compiler) {
        compiler.plugin('compilation', function (compilation, data) {

            data.normalModuleFactory.plugin('parser', function (parser, options) {

                parser.plugin(`call $findme`, function (expr) {
                    console.log("found $findme!");
                });
            });
        });
    }

https://github.com/RonPenton/webpack-parser-fail-demo/blob/master/parse.js

我要做的就是在代码中找到 $findme() 的所有实例并记录有关它们的信息。稍后，我什至可能会改变电话，但那是另一天的事了。

当我提供这个源文件时，一切都很好:https://github.com/RonPenton/webpack-parser-fail-demo/blob/master/good.js

$findme("Testing");
$findme("Testing too...");

当我运行 webpack 时，输出显示找到了两个实例:

found $findme!
found $findme!
Hash: a6555af5036af17d9320
Version: webpack 3.6.0
Time: 69ms
  Asset     Size  Chunks             Chunk Names
good.js  2.52 kB       0  [emitted]  main
   [0] ./good.js 47 bytes {0} [built]

但是当我使用不同的入口点时，函数在本地( https://github.com/RonPenton/webpack-parser-fail-demo/blob/master/bad.js )或外部模块( https://github.com/RonPenton/webpack-parser-fail-demo/blob/master/bad2.js )中定义，解析器突然停止查找这些方法。

function $findme(input) {
    console.log(input);
}
$findme("Testing");
$findme("Testing too...");

====

import { $findme } from './findme';
$findme("Testing");
$findme("Testing too..."); 

那么有什么关系呢？我尝试深入研究 webpack 源代码，据我所知，这似乎是故意的。但是实际上没有关于为什么这样做的文档，也没有评论。

这不是可以用插件完成的吗？

我在这里先向您的帮助表示感谢。

Answer 1

奇怪的是，webpack 解析器仅在以某种方式调用或检索函数时才调用这些钩子(Hook)。这就是为什么你的钩子(Hook)在以一种方式调用函数时起作用，但在从某个地方导入时不起作用的原因。
我试图找到对对象方法的所有调用并且遇到了同样的问题。
另一个人提出的这个github问题更详细:https://github.com/webpack/webpack/issues/9480
要解决此问题，您需要欺骗 webpack 解析器，使其认为由于某种原因它不想调用钩子(Hook)的函数/方法调用是标识符，就像这里所做的一样:https://github.com/aurelia/webpack-plugin/blob/9f6f7983312c66f857e79b744e4ec257cc287b8b/dist/InlineViewDependenciesPlugin.js
以下是 webpack 代码中的相关位:


您需要使用解析器“评估” Hook 返回自定义 BasicEvaluatedExpression具有 isIdentifier 的实例对于要查找的所有函数调用，设置为 true。然后 call钩子(Hook)会被完整的表达式调用。就我而言，我需要包含函数及其参数的完整 CallExpression。