如何在非 index.html 页面上启动 React 应用程序答案

【问题标题】：How to start React app on non-index.html page如何在非 index.html 页面上启动 React 应用程序
【发布时间】：2018-08-28 11:15:31
【问题描述】：

出于 SEO 和性能方面的原因，我希望我的应用的登录页面是一个基本的 HTML 文件。所以 index.html 应该是静态 HTML，然后当点击链接时，它会将用户带到 React 应用程序。

我正在按照本教程 here 从头开始设置 React 应用程序，但是当单击应用程序链接时，应用程序无法启动。任何帮助表示赞赏。

webpack 配置

const path = require("path");
const webpack = require("webpack");

/*entry: "./src/index.js",*/

module.exports = {
  entry: "./public/index.html",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        options: { presets: ['env'] }
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  },
  resolve: { extensions: ['*', '.js', '.jsx'] },
  output: {
    path: path.resolve(__dirname, "dist/"),
    publicPath: "/dist/",
    filename: "bundle.js"
  },
  devServer: {
    contentBase: path.join(__dirname, "public/"),
    port: 3000,
    publicPath: "http://localhost:3000/dist/",
    hotOnly: true
  },
  plugins: [ new webpack.HotModuleReplacementPlugin() ]
};

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Taduun</title>
  </head>
  <body>
    <a href="app.html">To the APP</a>
  </body>
</html>

app.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>React Starter</title>
  </head>
  <body>
    <div id="root"></div>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <script src="../dist/bundle.js"></script>
  </body>
</html>

【问题讨论】：

webpack-config.js 中 entry 属性的 ./public/index.html 值是什么？
使用一些 ssr 或 gatsby 来响应 seo 吗？
@Majid 这是我没有受过教育的尝试解决这个问题。
@xadm 您能否详细说明这些工具如何提供帮助？我对 React 很陌生。通常我过去只使用 create-react-app 来启动 React 项目。
google for 'react seo ssr' ??

标签： javascript reactjs webpack

【解决方案1】：

您的webpack-config 文件有问题。您应该将条目更改为 entry: "./src/index.js" 因为这是您分享的帖子中的那个。

您误解了文件中的entry。此条目是您本地服务器的条目文件，而不是 webpack 构建 bundle.js 文件的条目。您应该考虑查看 webpack 文档以获取更多信息 https://webpack.js.org/configuration/。

所以你的新配置文件是

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        options: { presets: ['env'] }
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  },
  resolve: { extensions: ['*', '.js', '.jsx'] },
  output: {
    path: path.resolve(__dirname, "dist/"),
    publicPath: "/dist/",
    filename: "bundle.js"
  },
  devServer: {
    contentBase: path.join(__dirname, "public/"),
    port: 3000,
    publicPath: "http://localhost:3000/dist/",
    hotOnly: true
  },
  plugins: [ new webpack.HotModuleReplacementPlugin() ]
};

【讨论】：