如何正确地将antlr4生成的解析器与antlr4捆绑在一起？

Question

我一直在尝试使用webpack将解析器/词法分析器/侦听器.js文件与antlr捆绑在一起。我不确定我是否做对了。因为获取bundle.js文件后，我使用importScripts导入了该文件，但浏览器仍然声称该变量未定义。

1. 我已经使用antlr4 -Dlanguage=JavaScript LPMLN.g4生成了解析器/词法分析器/侦听器文件
2. 我写了一个main.js文件来引用解析器/词法分析器/侦听器。
3. 我配置了webpack.config.js文件进行捆绑。
4. 我将bundle.js文件导入了应用程序js文件中。

main.js：

var antlr4 = require('antlr4');
var LPMLNLexer = require('./LPMLNLexer').LPMLNLexer;
var LPMLNParser = require('./LPMLNParser').LPMLNParser;
var LPMLNListener = require('./LPMLNListener').LPMLNListener;

webpack.config.js：

module.exports = {
node: {
    module: "empty",
    net:"empty",
    fs: "empty"
},

entry: './main',
output:{
    path: __dirname + '/dist',
    filename: 'bundle.js'
    }
};

与应用程序相关的代码：

var validate = function(input) {
    var lexer = new LPMLNLexer(chars);
    var tokens  = new CommonTokenStream(lexer);
    var parser = new LPMLNParser(tokens);
    var annotations = [];
    var listener = new AnnotatingErrorListener(annotations)
    parser.removeErrorListeners();
    parser.addErrorListener(listener);
    parser.parseMyRule();
    return annotations;
};

捆绑结果：

Entrypoint main = bundle.js
[0] ./antlr4/Utils.js 10.9 KiB {0} [built]
[1] ./antlr4/Token.js 4.54 KiB {0} [built]
[2] ./antlr4/IntervalSet.js 7.4 KiB {0} [built]
[6] ./antlr4/PredictionContext.js 21.9 KiB {0} [built]
[12] ./antlr4/index.js 1.13 KiB {0} [built]
[15] ./antlr4/Lexer.js 10.2 KiB {0} [built]
[18] ./antlr4/ParserRuleContext.js 6.55 KiB {0} [built]
[19] ./antlr4/InputStream.js 3.22 KiB {0} [built]
[27] ./antlr4/polyfills/codepointat.js 1.6 KiB {0} [built]
[28] ./antlr4/polyfills/fromcodepoint.js 1.87 KiB {0} [built]
[31] ./LPMLNListener.js 7.88 KiB {0} [built]
[32] ./main.js 214 bytes {0} [built]
[33] ./antlr4/atn/index.js 534 bytes {0} [built]
[50] ./LPMLNLexer.js 15.8 KiB {0} [built]
[51] ./LPMLNParser.js 115 KiB {0} [built]
    + 37 hidden modules

这是捆绑项目的结构：

我不知道这是将解析器与antlr捆绑在一起的正确方法，以及如何继续使用捆绑的文件。