面试题：Webpack 中如何配置以实现 React 框架的基本集成

Question

请描述在 Webpack 配置文件（如 webpack.config.js）中，为了实现与 React 框架的无缝集成，需要进行哪些基本的加载器（loader）和插件（plugin）配置，并给出简单示例代码。

Answer 1

加载器（Loader）配置

1. Babel Loader：用于将 ES6+ 代码转换为 ES5 代码，以兼容不同浏览器。同时，还需要配置 @babel/preset - react 来处理 React 的 JSX 语法。
   • 安装：npm install babel - loader @babel/core @babel/preset - env @babel/preset - react --save - dev
   • 配置示例：

module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel - loader',
                    options: {
                        presets: ['@babel/preset - env', '@babel/preset - react']
                    }
                }
            }
        ]
    }
};

2. CSS Loader：用于处理 CSS 文件。通常需要 style - loader 和 css - loader 配合使用。
   • 安装：npm install style - loader css - loader --save - dev
   • 配置示例：

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style - loader', 'css - loader']
            }
        ]
    }
};

3. File Loader：用于处理图片、字体等文件。
   • 安装：npm install file - loader --save - dev
   • 配置示例：

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif|woff|woff2|eot|ttf|svg)$/,
                use: [
                    {
                        loader: 'file - loader',
                        options: {}
                    }
                ]
            }
        ]
    }
};

插件（Plugin）配置

1. HtmlWebpackPlugin：自动生成 HTML 文件，并将打包后的 JavaScript 文件插入到 HTML 中。
   • 安装：npm install html - webpack - plugin --save - dev
   • 配置示例：

const HtmlWebpackPlugin = require('html - webpack - plugin');
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
};

2. CleanWebpackPlugin：在打包前清空输出目录，确保每次打包都是最新的。
   • 安装：npm install clean - webpack - plugin --save - dev
   • 配置示例：

const { CleanWebpackPlugin } = require('clean - webpack - plugin');
module.exports = {
    plugins: [
        new CleanWebpackPlugin()
    ]
};