How do I set up Webpack with React and Babel?

How do I set up Webpack with React and Babel?

To set up Webpack with React and Babel, you'll need to install a few packages. Start by running: npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react.

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

In your webpack.config.js, you should include entry, output, and module rules. 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: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
};

Do I need to configure Babel as well?

Yes, you need to create a .babelrc file to configure Babel. It should look like this:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

How do I run my project after setting everything up?

You can run your project by adding a script in your package.json:

"scripts": {
  "build": "webpack --mode production",
  "start": "webpack serve --mode development"
}

Then, use npm run start to start the development server.