面试题：Webpack环境变量管理之中等难度问题

在Webpack项目中使用DefinePlugin设置环境变量并在React组件中使用的步骤及示例

安装Webpack及相关插件：确保已经安装了webpack和webpack - cli，如果还没有安装html - webpack - plugin和@babel/core、@babel/preset - react等必要依赖，也一并安装。

npm install webpack webpack - cli html - webpack - plugin @babel/core @babel/preset - react --save - dev

配置Webpack：在webpack.config.js中引入DefinePlugin，并设置环境变量。

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

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel - loader',
                    options: {
                        presets: ['@babel/preset - react']
                    }
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new webpack.DefinePlugin({
            // 设置环境变量，注意这里的值需要用JSON.stringify包裹
            'process.env.API_URL': JSON.stringify('http://example.com/api')
        })
    ]
};

在React组件中获取并使用环境变量：在React组件中，可以通过process.env访问设置的环境变量。

import React from'react';

const App = () => {
    return (
        <div>
            <p>API URL: {process.env.API_URL}</p>
        </div>
    );
};

export default App;

在上述示例中，我们在Webpack配置中使用DefinePlugin设置了一个名为process.env.API_URL的环境变量，并在React组件中成功获取并展示了这个变量的值。注意在设置值时需要使用JSON.stringify，以确保Webpack能正确处理字符串。

面试题：Webpack环境变量管理之中等难度问题

知识考点

面试题答案

在Webpack项目中使用DefinePlugin设置环境变量并在React组件中使用的步骤及示例