如何使用 React 创建多页面应用程序

小能豆

如何使用 React 创建多页面应用程序

javascript

我已经使用 react js 创建了一个单页 Web 应用程序。我曾经webpack创建过所有组件的捆绑包。但现在我想创建许多其他页面。大多数页面都与 API 调用相关。即在中index.html，我显示了来自的内容API。我想在另一个页面中插入内容，该页面解析来自 API 的数据。Webpack 将 react 的所有内容压缩到一个文件中，即bundle.js。但是，的配置webpack如下：

const webpack = require('webpack');

var config = {
entry: './main.js',

output: {
    path:'./',
    filename: 'dist/bundle.js',
},

devServer: {
    inline: true,
    port: 3000
},

module: {
    loaders: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',

            query: {
                presets: ['es2015', 'react']
            }
        }
    ]
},

plugins: [
    new webpack.DefinePlugin({
        'process.env': {
            'NODE_ENV': JSON.stringify('production')
        }
    }),
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    })
]
}

module.exports = config;

现在，我很困惑其他页面的配置是什么样的webpack，或者使用什么正确的方式构建多页应用程序react.js

阅读 45

2024-06-12

共1个答案

小能豆

要使用 Webpack 构建多页 React 应用程序，您需要配置 Webpack 以处理多个入口点和输出。这样，您可以为每个页面创建单独的包。每个入口点对应于应用程序的不同页面或部分。

以下是如何修改 Webpack 配置以支持多个页面的示例：

逐步配置

更新入口点：

为每个页面定义一个入口点。例如，如果您有两个页面，main.js和anotherPage.js，则应将它们定义为单独的入口。

```
const path = require(‘path’);
const webpack = require(‘webpack’);

module.exports = {
entry: {
main: ‘./src/main.js’,
anotherPage: ‘./src/anotherPage.js’,
},
output: {
path: path.resolve(__dirname, ‘dist’),
filename: ‘[name].bundle.js’, // This will generate main.bundle.js and anotherPage.bundle.js
},
devServer: {
inline: true,
port: 3000,
},
module: {
rules: [
{
test: /.jsx?$/,
exclude: /node_modules/,
use: {
loader: ‘babel-loader’,
options: {
presets: [‘@babel/preset-env’, ‘@babel/preset-react’],
},
},
},
],
},
plugins: [
new webpack.DefinePlugin({
‘process.env’: {
NODE_ENV: JSON.stringify(‘production’),
},
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
},
}),
],
};
```

创建单独的 HTML 文件：

使用html-webpack-plugin为每个入口点生成单独的 HTML 文件。

首先，安装插件：

npm install --save-dev html-webpack-plugin

html-webpack-plugin然后，更新每个页面使用的 Webpack 配置：

```
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

module.exports = {
entry: {
main: ‘./src/main.js’,
anotherPage: ‘./src/anotherPage.js’,
},
output: {
path: path.resolve(__dirname, ‘dist’),
filename: ‘[name].bundle.js’,
},
devServer: {
inline: true,
port: 3000,
},
module: {
rules: [
{
test: /.jsx?$/,
exclude: /node_modules/,
use: {
loader: ‘babel-loader’,
options: {
presets: [‘@babel/preset-env’, ‘@babel/preset-react’],
},
},
},
],
},
plugins: [
new HtmlWebpackPlugin({
filename: ‘index.html’,
template: ‘./src/index.html’,
chunks: [‘main’],
}),
new HtmlWebpackPlugin({
filename: ‘anotherPage.html’,
template: ‘./src/anotherPage.html’,
chunks: [‘anotherPage’],
}),
new webpack.DefinePlugin({
‘process.env’: {
NODE_ENV: JSON.stringify(‘production’),
},
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
},
}),
],
};
```

在此配置中，将为条目和为条目html-webpack-plugin生成，每个都包括它们各自的捆绑包。index.html``main``anotherPage.html``anotherPage

创建入口点文件：

确保您拥有 JavaScript 文件（main.js和anotherPage.js）以及相应的 HTML 模板（index.html和anotherPage.html）。

例如：

src/main.js
src/anotherPage.js
src/index.html
src/anotherPage.html

你的 HTML 模板可能看起来像这样：

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Main Page</title> </head> <body> <div id="root"></div>  </body> </html>

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Another Page</title> </head> <body> <div id="root"></div>  </body> </html>

概括

通过执行以下步骤，您可以配置 Webpack 来为不同的页面创建单独的包，每个包都有自己的入口点和 HTML 文件。此设置可让您高效地管理多页 React 应用程序。

2024-06-12