Javascript 无法加载和显示作为第三方脚本加载的前端React元素

我正在尝试构建一个工具，当用户访问我的网站时，它将利用本地存储来读/写一些关于会话的数据

最后，我希望在页面上将此信息作为一个固定的div或“窗口”显示给用户，该窗口只显示存储在

localStorage

中的值

考虑到我对React很熟悉，我想使用React来构建这个项目的显示窗口部分。（同样，理想情况下，它只是读取/写入

localStorage

，似乎很简单。）

不过需要注意的是，我不会在完整的React应用程序中使用它。我想要显示窗口的现有网站是vanilla js/html/css

因此，我希望能够利用Webpack这样的工具将React应用程序组件部分导出/打包为一个js文件，并像其他任何第三方javascript库一样加载和启动显示

<script
  async
  src="//www.mysite.org/frontend-bundle.js"
></script>

这似乎是正确构建的，为了测试，我添加了一个基本的

console.log（'Hello，World！'）

在主

App.js

中，让我知道它已加载。当我查看捆绑文件的源代码时，我会看到这个控制台日志

但是，当我将此捆绑包文件作为页面上的

标记从服务器加载时，我会在浏览器网络选项卡中看到文件加载良好，但没有控制台日志。没有执行，也没有呈现

我是否有明显的遗漏和/或应该以完全不同的方式思考

---

感谢您的洞察力

你能证明你的html放在哪里吗？以及index.html和index.js的实际来源？

const path = require("path")
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const glob = require("glob")

module.exports = {
  entry: {
    "bundle.js": glob.sync("build/static/?(js|css)/*.?(js|css)").map(f => path.resolve(__dirname, f)),
  },
  output: {
    filename: "build/static/js/bundle.min.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [new UglifyJsPlugin()],
}