How can I add Webpack to a React app so I can use Lucid with it?

Question

I have a React app (created with npx create-react-app) that doesn't have Webpack installed. I want to add lucid-cardano to it. Going through Lucid documentation, I found that Webpack is a dependency, since I need to enable webpack.config.js file with the following configuration to make it work:

experiments: {
    asyncWebAssembly: true,
    topLevelAwait: true,
    layers: true // optional, with some bundlers/frameworks it doesn't work without
}

I tried to install Webpack in my project but it seems I am missing a lot of things, since I not only have to add the webpack.config.js file but also some loaders and a server to serve the bundle.js generated (I got to this point with no issues).

This is the webpack.config.js file I generated for my project:

// Webpack uses this to work with directories
const path = require('path');

// This is the main configuration object.
// Here, you write different options and tell Webpack what to do
module.exports = {

  experiments: {
    asyncWebAssembly: true,
    topLevelAwait: true,
    layers: true // optional, with some bundlers/frameworks it doesn't work without
  },
  resolve: {
    extensions: ['', '.js', '.jsx', '.css']
  },
  // Path to your entry point. From this file Webpack will begin its work
  entry: './src/index.js',

  // Path and filename of your result bundle.
  // Webpack will bundle all JavaScript into this file
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '',
    filename: 'bundle.js'
  },

  // Default mode for Webpack is production.
  // Depending on mode Webpack will apply different things
  // on the final bundle. For now, we don't need production's JavaScript 
  // minifying and other things, so let's set mode to development
  mode: 'development',
  module: {
    rules: [
        {
          test: /\.js$/,
          exclude: /(node_modules)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        },
        { test: /\.css$/, use: { loader: "css-loader" } }
    ]
  }
};

What are the steps I am missing to correctly serve my frontend and be able to use lucid-cardano?

Answer 1

You do need webpack to work with lucid-cardano.

This is a very good and complete guide on how you can add webpack to a react app: https://jsramblings.com/creating-a-react-app-with-webpack/.