使用 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"]
}

索引.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 在網站上部署應用程序時出錯（顯示空白頁）

問題描述

1 個解決方案

解決方案1
1 已采納 2020-05-11 16:52:42

使用 Webpack 和 Babel 在網站上部署應用程序時出錯（顯示空白頁）

問題描述

1 個解決方案

解決方案1 1 已采納 2020-05-11 16:52:42

解決方案1
1 已采納 2020-05-11 16:52:42