将webpack作为子进程运行以生成源文件

Question

我是webpack的新手，如果有明显的问题，我很抱歉。我正在尝试让包antlr4-webpack-loader工作，从.g4文件生成一些源代码。我想我已经做到了，因为我有一个包含require的javascript文件，而.bundle.文件似乎包含antlr4的输出，但它也有以下内容：

module.exports = __webpack_require__(!(function webpackMissingModule() { var e = new Error("Cannot find module 'antlr4/index'"); e.code = 'MODULE_NOT_FOUND'; throw e; }()));

contentScript.js启动如下：

import 'jquery';
import 'antlr4'; // This line doesn't cause the error
import '../anaplan/AnaplanFormula.g4'; // This line causes the MODULE_NOT_FOUND error

webpack.config.js如下：

var webpack = require("webpack"),
path = require("path"),
fileSystem = require("fs"),
env = require("./utils/env"),
CleanWebpackPlugin = require("clean-webpack-plugin").CleanWebpackPlugin,
CopyWebpackPlugin = require("copy-webpack-plugin"),
HtmlWebpackPlugin = require("html-webpack-plugin"),
WriteFilePlugin = require("write-file-webpack-plugin");
var options = {
mode: process.env.NODE_ENV || "development",
entry: {
contentScript: path.join(__dirname, "src", "js", "contentScript.js"),
background: path.join(__dirname, "src", "js", "background.js"),
},
output: {
path: path.join(__dirname, "build"),
filename: "[name].bundle.js"
},
module: {
rules: [
{
test: /.css$/,
loader: "style-loader!css-loader",
exclude: /node_modules/
},
{
test: new RegExp('.(jpg|jpeg|png|gif|eot|otf|svg|ttf|woff|woff2)$'),
loader: "file-loader?name=[name].[ext]",
exclude: /node_modules/
},
{
test: /.html$/,
loader: "html-loader",
exclude: /node_modules/
},
{
test: /.g4/,
exclude: /(node_modules)/,
use: {
loader:'antlr4-webpack-loader'
}
}
]
},
resolve: {
modules: [path.resolve(__dirname, 'src'), 'node_modules']
},
node: { module: "empty", net: "empty", fs: "empty" },
plugins: [
// clean the build folder
new CleanWebpackPlugin(),
// expose and write the allowed env vars on the compiled bundle
new webpack.EnvironmentPlugin(["NODE_ENV"]),
new CopyWebpackPlugin([{
from: "src/manifest.json",
transform: function (content, path) {
// generates the manifest file using the package.json informations
return Buffer.from(JSON.stringify({
description: process.env.npm_package_description,
version: process.env.npm_package_version,
...JSON.parse(content.toString())
}))
}
}]),
new WriteFilePlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
})
]
};
if (env.NODE_ENV === "development") {
options.devtool = "cheap-module-source-map";
}
module.exports = options;

据我所知，antlr4-webpack-loader插件只为.g4文件生成了一个新的webpack进程，并从中生成一个bundle.js文件作为输出，然后将其绑定到"父"文件中。我可以逐步遍历antlr4-webpack-loader中的代码，这似乎确实有效(就像我说的，它的输出似乎在我的contentScript.bundle.js文件中。我可以将其视为externals: [ 'antlr4/index' ],的某些内容，我想这是因为它从.g4文件生成的文件需要它，但引用应该由需要g4的脚本来解析。

作为参考，下面的package.json在devDependencies中不包括antlr4包，但是当我在devDependencies和dependencies中都包括它时，我得到了相同的错误：

{
"name": "anaplanextension",
"version": "1.0.0",
"description": "",
"main": "background.js",
"directories": {
"lib": "lib"
},
"dependencies": {
"antlr4": "^4.9.2",
"arrive": "^2.4.1",
"jquery": "^3.6.0"
},
"devDependencies": {
"antlr4-webpack-loader": "^0.1.1",
"clean-webpack-plugin": "3.0.0",
"copy-webpack-plugin": "5.0.5",
"css-loader": "3.2.0",
"file-loader": "4.3.0",
"fs-extra": "8.1.0",
"html-loader": "0.5.5",
"html-webpack-plugin": "3.2.0",
"style-loader": "1.0.0",
"webpack": "4.41.2",
"webpack-cli": "3.3.10",
"webpack-dev-server": "3.9.0",
"write-file-webpack-plugin": "4.5.1"
},
"scripts": {
"build": "node utils/build.js",
"start": "node utils/webserver.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/georgeduckett/AnaplanExtension.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/georgeduckett/AnaplanExtension/issues"
},
"homepage": "https://github.com/georgeduckett/AnaplanExtension#readme"
}

Answer 1

我建议在这里走另一条路。该webpack加载程序在过去4年中没有更新，使用了一个相当旧的ANTLR4jar(当前版本为4.9.2(，并使用了Javascript运行时，这是已知的某些问题。

相反，我建议您切换到antlr4ts运行时，并使用antlr4ts-cli从语法生成文件。两者仍然被标记为alpha，但我已经使用这些包好几年了(例如，在我的vscode扩展vscode-antlr4中(。

这样，您就可以删除webpack加载程序，并在构建过程中生成解析器/lexer文件。