bundle.min.js 不在 html 文件中显示组件答案

【问题标题】：bundle.min.js not displaying components in html filebundle.min.js 不在 html 文件中显示组件
【发布时间】：2021-05-23 02:18:24
【问题描述】：

我想在简单的脚本标签（一个小部件）中显示我的反应组件我使用 npx create-react-app widget_app 创建了简单的反应应用程序。我按照以下步骤在单个捆绑文件中构建了一个反应应用程序，即 bundle.min.js：

npx embeddable-create-react-app
在 package.json 文件的脚本部分添加了以下内容：

"web:build": "npm run build && npm run build:bundle",

"build:bundle": "webpack --config webpack.config.js"

yarn web:build
它在以下路径为我提供了一个名为 bundle.min.js 的捆绑文件： widget_app/dist/build/static/js/bundle.min.js

我使用以下命令在服务器上运行了上述捆绑文件：

npm install -g http-server
http-服务器

我要在其中显示我的反应小部件的 HTML 文件（捆绑文件）：

<!doctype html>
<html lang="en">
<head>
    <title>Embedded Widget App</title>
</head>
<body>
    <script type="text/javascript" src="http://127.0.0.1:8080/bundle.min.js"></script>
</body>
</html>

但是这个 html 文件没有显示任何东西（如附加的屏幕截图所示）。

【问题讨论】：

标签： javascript html reactjs webpack react-widgets

【解决方案1】：

这是因为默认情况下禁用源映射文件，因此在创建项目的构建时不会生成源映射文件。要启用在项目根目录的 .env 文件中添加以下行。

GENERATE_SOURCEMAP = true

您可以参考这篇文章了解更多信息：Easy Debugging In React With WebPack Source Maps

【讨论】：