我已经使用 react js 创建了一个单页 Web 应用程序。我曾经webpack创建过所有组件的捆绑包。但现在我想创建许多其他页面。大多数页面都与 API 调用相关。即在 中index.html,我显示了来自 的内容API。我想在另一个页面中插入内容,该页面解析来自 API 的数据。Webpack 将 react 的所有内容压缩到一个文件中,即bundle.js。但是, 的配置webpack如下:
webpack
index.html
API
bundle.js
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
react.js
要使用 Webpack 构建多页 React 应用程序,您需要配置 Webpack 以处理多个入口点和输出。这样,您可以为每个页面创建单独的包。每个入口点对应于应用程序的不同页面或部分。
以下是如何修改 Webpack 配置以支持多个页面的示例:
为每个页面定义一个入口点。例如,如果您有两个页面,main.js和anotherPage.js,则应将它们定义为单独的入口。
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-webpack-plugin为每个入口点生成单独的 HTML 文件。
html-webpack-plugin
首先,安装插件:
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
index.html``main``anotherPage.html``anotherPage
确保您拥有 JavaScript 文件(main.js和anotherPage.js)以及相应的 HTML 模板(index.html和anotherPage.html)。
anotherPage.html
例如:
src/main.js
src/anotherPage.js
src/index.html
src/anotherPage.html
你的 HTML 模板可能看起来像这样:
<!-- src/index.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> <!-- The bundle will be injected here by HtmlWebpackPlugin --> </body> </html>
<!-- src/anotherPage.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> <!-- The bundle will be injected here by HtmlWebpackPlugin --> </body> </html>
通过执行以下步骤,您可以配置 Webpack 来为不同的页面创建单独的包,每个包都有自己的入口点和 HTML 文件。此设置可让您高效地管理多页 React 应用程序。