How do I integrate Webpack with my React application?

How do I integrate Webpack with my React application?

To integrate Webpack with your React app, you'll need to set up a Webpack configuration file and install necessary packages.

What packages do I need to install?

You'll need to install webpack, webpack-cli, babel-loader, and some Babel presets like @babel/preset-env and @babel/preset-react.

Can you show me a basic Webpack configuration?

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',
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

How do I run the Webpack build process?

You can run the build process by adding a script in your package.json like this:

"scripts": {
  "build": "webpack --mode production"
}

Then, run npm run build in your terminal.