How do I set up Webpack with React?

How do I set up Webpack with React?

To set up Webpack with React, you'll need to install Webpack, Webpack CLI, and Babel. Would you like a step-by-step guide?

Yes, please provide the steps.

1. Install Webpack and Babel: npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react.
2. Create a webpack.config.js file.
3. Set up Babel by creating a .babelrc file.
4. Add scripts in your package.json to build and start your app.

What should I include in the webpack.config.js file?

In webpack.config.js, include entry and output properties, module rules for Babel, and any plugins you need. Here's a basic 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',
      },
    ],
  },
};