Я хочу, чтобы целевая страница моего приложения была базовым HTML-файлом по причинам SEO и производительности. Таким образом, index.html должен быть статическим HTML, а затем, нажимая на ссылку, он переводит пользователя в собственное приложение React.
Я следую этому руководству здесь , чтобы настроить приложение 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>