如何在Webpack中访问bundle.js并在HTML中调用其代码？

问题分析 #

目前生成的nlweb.bundle.js存在几个关键问题：

• testProcedure、generatorVar等变量仅为局部变量，未挂载到__webpack_exports__，导致全局的nlweblib是空对象
• 编译后的代码依赖React.createElement，但Webpack未配置React相关依赖，浏览器会找不到React
• 自定义语法中的start testprocedure =>();未被编译成实际执行的代码

1. 安装React依赖并调整Webpack配置 #

因为编译后的代码使用了React的API，首先安装依赖：

npm install react react-dom

修改Webpack配置的resolve项，让Webpack能识别React模块：

resolve: {
    extensions: ['.js', '.jsx'] // 添加.jsx扩展名支持
}

2. 修改自定义语法编译器，正确导出变量并执行启动逻辑 #

调整编译器的输出逻辑，将自定义语法中的变量、函数挂载到__webpack_exports__，同时执行start语句对应的代码：
编译后的代码应改为：

let generatorVar;
let generatorLiteral = 20;
function testProcedure(testParameter) {
      let testWaardeProcedure;
      return React.createElement("div", null, React.createElement("h1", null, "Helloworld"), React.createElement("p", null, "Hello"));
}
// 导出变量和函数到全局库对象
__webpack_exports__.generatorVar = generatorVar;
__webpack_exports__.generatorLiteral = generatorLiteral;
__webpack_exports__.testProcedure = testProcedure;
// 执行start对应的调用逻辑
testProcedure();

3. 在HTML中准备React挂载容器并渲染 #

修改HTML模板src/html/index.html，添加React元素的挂载容器，并完成渲染：

<!DOCTYPE html>
<html>
<head>
    <title>NLWeb Demo</title>
</head>
<body>
    <!-- React元素挂载容器 -->
    <div id="root"></div>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // 调用库中的函数获取React元素，并用ReactDOM渲染
            const appElement = nlweblib.testProcedure();
            ReactDOM.render(appElement, document.getElementById('root'));
        });
    </script>
</body>
</html>

或者直接在编译器中生成渲染代码（无需HTML中的脚本），在testProcedure()后添加：

ReactDOM.render(testProcedure(), document.getElementById('root'));

4. 验证运行 #

启动Webpack开发服务器：

npm run serve

浏览器打开后，页面会显示Helloworld标题和Hello段落，说明代码已生效。

内容的提问来源于stack exchange，提问作者Toby x