webpack构建react多页面应用详解

下面我将详细讲解如何使用webpack构建react多页面应用。

准备工作

在开始之前，我们需要准备以下环境和工具：

node.js和npm的环境
webpack和相关loader和插件（例如babel-loader、css-loader、html-webpack-plugin等）
一个基础的react项目（可以使用create-react-app快速搭建）

配置webpack

安装webpack和相关loader和插件

npm install webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react css-loader style-loader html-webpack-plugin -D

新建webpack.config.js文件并配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development', // 开发模式
  entry: { // 入口文件
    home: path.resolve(__dirname, './src/home.js'),
    about: path.resolve(__dirname, './src/about.js')
  },
  output: { // 输出文件
    path: path.resolve(__dirname, './dist'),
    filename: '[name].bundle.js'
  },
  module: { // 使用loader处理文件
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [ // 使用插件生成多个html文件
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './public/home.html'),
      filename: 'home.html',
      chunks: ['home']
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './public/about.html'),
      filename: 'about.html',
      chunks: ['about']
    })
  ],
  devServer: { // 配置开发服务器
    contentBase: path.resolve(__dirname, './dist'),
    port: 8080
  }
};

上述代码中，我们定义了两个入口文件：home.js和about.js，输出文件名为home.bundle.js和about.bundle.js，并使用了babel-loader、css-loader、style-loader和html-webpack-plugin等loader和插件，并配置了开发服务器的路径和端口号。

在package.json中添加scripts命令

{
  "scripts": {
    "start": "webpack serve --open"
  }
}

编写react代码

代码示例1：home.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

ReactDOM.render(
  <div className="container">
    <h1>Home Page</h1>
    <p>This is the home page.</p>
  </div>,
  document.getElementById('root')
);

代码示例2：about.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

ReactDOM.render(
  <div className="container">
    <h1>About Page</h1>
    <p>This is the about page.</p>
  </div>,
  document.getElementById('root')
);

编写HTML模板

代码示例3：home.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Home Page</title>
  <script src="./home.bundle.js"></script>
</head>
<body>
  <div id="root"></div>
</body>
</html>

代码示例4：about.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>About Page</title>
  <script src="./about.bundle.js"></script>
</head>
<body>
  <div id="root"></div>
</body>
</html>

运行项目

最后，在项目根目录下运行以下命令即可运行项目：

npm run start

打开浏览器，在地址栏输入“localhost:8080/home.html”或“localhost:8080/about.html”即可查看对应的页面。

总结一下，我们在本次教程中通过webpack构建了一个基于react的多页面应用程序，并通过示例展示了如何使用webpack处理react代码、生成多个html文件等过程。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：webpack构建react多页面应用详解 - Python技术站