Question

出于SEO和性能方面的原因，我希望我的应用的目标网页是基本的HTML文件。因此index.html应该是静态HTML，然后单击链接时，它将带用户到React应用。

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

webpack-config

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>

Answer 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() ]
};

如何在非index.html页面上启动React应用

1 个答案: