使用 Webpack 和 Babel 在网站上部署应用程序时出错（显示空白页面）

Question

我正在尝试将我的应用程序部署到我的网站，但它在控制台中部署时没有错误，但 html 页面为空白。以下是我的一些文件。

package.json:

    {
      "name": "name-here",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "@material-ui/core": "^4.9.13",
        "@testing-library/jest-dom": "^4.2.4",
        "@testing-library/react": "^9.3.2",
        "@testing-library/user-event": "^7.1.2",
        "bootstrap": "^4.4.1",
        "react": "^16.13.1",
        "react-bootstrap": "^1.0.1",
        "react-day-picker": "^7.4.8",
        "react-device-detect": "^1.12.1",
        "react-dom": "^16.13.1",
        "react-hook-form": "^5.6.2",
        "react-icons": "^3.10.0",
        "react-native-vector-icons": "^6.6.0",
        "react-router": "^5.1.2",
        "react-router-dom": "^5.1.2",
        "react-scripts": "3.4.1",
        "react-time-picker": "^4.0.1",
        "react-web-vector-icons": "^1.0.2",
        "requirejs": "^2.3.6"
      },
      "devDependencies": {
        "@babel/core": "^7.9.6",
        "@babel/preset-env": "^7.9.6",
        "@babel/preset-react": "^7.9.4",
        "babel-loader": "^8.1.0",
        "babel-preset-expo": "~8.1.0",
        "css-loader": "^3.5.3",
        "file-loader": "^6.0.0",
        "html-loader": "^1.1.0",
        "html-webpack-plugin": "^4.3.0",
        "react-scripts": "^3.4.1",
        "ttf-loader": "^1.0.2",
        "url-loader": "^4.1.0",
        "webpack": "^4.43.0",
        "webpack-cli": "^3.3.11",
        "webpack-dev-server": "^3.11.0"
      },
      "scripts": {
        "start": "webpack-dev-server --mode development",
        "build": "webpack --mode production",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },
      "eslintConfig": {
        "extends": "react-app"
      },
      "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      }
    }

webpack.config.js:

const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: path.join(__dirname, "src/index.js"),
  output: {
    path: __dirname + "/dist",
    publicPath: "/",
    filename: "bundle.js",
  },
  devServer: {
    contentBase: "./dist",
  },
  resolve: {
    extensions: ["*", ".js", ".jsx"],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        exclude: /node_modules/,
        loader: "url-loader",
      },
      {
        test: /\.html$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "html-loader",
          },
        ],
      },
      {
        test: /\.(woff|woff2|eot|ttf)$/,
        exclude: /node_modules/,
        loader: "url-loader?limit=100000",
      },
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: path.join(__dirname, "public/index.html"),
      filename: "./index.html",
    }),
  ],
};

.babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

index.html:

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Name here</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

index.js:

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

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

有人可以指导我找到解决方案吗？我已经生成了一个 build 文件夹和 dist 文件夹。它构建成功。

Answer 1

您的 index.html 页面未加载任何 js 资产。因此，您看到空白页是有道理的。

我可能会推荐使用 create-react-app 来引导一个新的 React 项目。它为您提供了一个 npm run build 命令，该命令将在 build 文件夹中创建您的应用程序的可部署版本。

使用 Webpack 和 Babel 在网站上部署应用程序时出错（显示空白页面）

Error deploying app on website with Webpack and Babel (shows blank page)

javascript

reactjs

webpack

babeljs