Javascript 调用通过Web包从create react应用程序生成的bundle.js_Javascript_Reactjs_Webpack_Widget_Create React App

Javascript 调用通过Web包从create react应用程序生成的bundle.js

javascript reactjs webpack

Javascript 调用通过Web包从create react应用程序生成的bundle.js,javascript,reactjs,webpack,widget,create-react-app,Javascript,Reactjs,Webpack,Widget,Create React App,我已经从我的create react应用程序项目中创建了一个bundle.js文件和webpack，因为它与下面的配置一起： const path = require("path") const UglifyJsPlugin = require("uglifyjs-webpack-plugin") const glob = require("glob") module.exports = { entry: { "bundle.js": glob.sync("build/static

我已经从我的create react应用程序项目中创建了一个bundle.js文件和webpack，因为它与下面的配置一起：

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: "release/bundle.min.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [new UglifyJsPlugin()],
}

这是我的index.html

<html>
  <body id="root">
  <script src="path-to-bundle.min.js"></script>
</html>

除非运行eject（这是一种单向操作），否则无法将自定义webpack配置与Create React应用程序一起使用。@hindmost我遵循了这一点，线程说这是可能的：开始！你能告诉我你试图复制它的步骤吗？你能和我分享你的步骤吗？创建一个新的Create react应用程序并将更新粘贴到package.json中，同时创建一个新的webpack.config.js并与我共享bundle文件。我要做的第一个故障排除步骤是将bundle.min.js的路径粘贴到浏览器的导航栏中，看看是否可以下载该bundle。这是为了检查Web服务器是否真的在为捆绑包提供服务。@winwiz1我已经解决了大多数琐碎的问题，在这方面一切正常。唯一的问题是，bundle代码不调用main方法

    "start": "react-scripts start",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build": "npm run build:react && npm run build:bundle",
    "build:react": "react-scripts build",
    "build:bundle": "webpack --config webpack.config.js"