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

Question

I'm trying to deploy my app to my website but it deploys without errors in console but blank html page.我正在尝试将我的应用程序部署到我的网站，但它在控制台中部署没有错误，但 html 页面空白。 The following are some of my files.以下是我的一些文件。

package.json: 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: 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 .babelrc

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

index.html:索引.html：

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

index.js: 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')
);

Could someone please guide me to a solution?有人可以指导我解决问题吗？ I have generated a build folder and dist folder.我已经生成了一个 build 文件夹和 dist 文件夹。 It builds successfully.它构建成功。

Answer 1

Your index.html page does not load any js assets.您的index.html页面未加载任何js资产。 So, it makes sense that you are seeing a blank page.因此，您看到的是空白页是有道理的。

Might I recommend using create-react-app for bootstrapping a new React project.我可以推荐使用create-react-app来引导一个新的 React 项目。 It gives you a npm run build command, which will create a ready-to-deploy version of your app in the build folder.它为您提供了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