Question

我正在尝试为单个文件包（从此处https://github.com/facebook/create-react-app/issues/3365#issuecomment-376546407复制的webpack.config.js）构建一个react-app，然后尝试将其包含到html页面的脚本标签中。由于某些原因，当我尝试向浏览器打开index.html时，页面为空白。为了使我的应用程序在html文件中运行，我仍然需要做什么？这是我的文件：

webpack.config.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)/main.*.?(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()],
}

index.html：

<html>
  <body>
    <div id="root"></div>
    <script src="./bundle.min.js"></script>
  </body>
</html>

Index.tsx：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();

我正在将dist目录中的单个文件捆绑复制到另一个文件夹s.t。我的文件结构如下：

.
+-- react_app
|   +-- index.html
|   +-- bundle.min.js

React应用程序的单个文件包未在浏览器中加载

0 个答案: