How do I configure Webpack for a React application?

How do I configure Webpack for a React application?

To configure Webpack for a React app, you'll need to set up a few key files: webpack.config.js, package.json, and install necessary loaders and plugins.

What loaders do I need to install?

You'll need babel-loader to transpile your JSX and ES6 code, and style-loader and css-loader for handling CSS files.

Can you show me a basic webpack.config.js example?

Sure! Here's a simple example:

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /.jsx?$/,
        exclude: /node_modules/, 
        use: 'babel-loader',
      },
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

Do I need to configure anything for development and production?

Yes, you might want to set up different configurations for development and production, such as enabling source maps in development and minifying your code in production.