How do I set up Webpack and Babel for my project?

How do I set up Webpack and Babel for my project?

To set up Webpack and Babel, first install them using npm. Run npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env.

What configuration do I need for Webpack?

Create a webpack.config.js file in your project root. Here's a basic example:

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

How do I configure Babel?

Create a .babelrc file in your project root with the following content:

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

Can you explain what each part of the configuration does?

Sure! The entry specifies the main file, output defines where to save the bundled file, and module.rules tells Webpack how to handle different file types, using Babel to transpile JavaScript.