Niranjan Singh's coding blog

Introduction:
Now that our React app is set up with the essentials, it’s time to dive into the world of Webpack. In this section, we’ll demystify the process of configuring Webpack to not only build our app but also to serve it, making our development workflow smoother. Though Webpack configuration might seem daunting at first, fear not – we’ll break it down step by step.

Installing Necessary Packages:
Before we commence with the Webpack setup, let’s install the packages we need. Open your terminal in the project directory and run:

npm install --save-dev webpack webpack-cli webpack-dev-server style-loader css-loader babel-loader

This might take a moment, but once installed, these packages will empower Webpack to perform various operations on our source code.

Creating the Webpack Configuration File:
Now, let’s create the heart of our Webpack setup – the configuration file. Create a file in your base directory named webpack.config.js and follow along with the code:

// webpack.config.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/env'],
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },
  output: {
    path: path.resolve(__dirname, 'dist/'),
    publicPath: '/dist/',
    filename: 'bundle.js',
  },
  devServer: {
    contentBase: path.join(__dirname, 'public/'),
    port: 3000,
    publicPath: 'http://localhost:3000/dist/',
    hotOnly: true,
  },
  plugins: [new webpack.HotModuleReplacementPlugin()],
};

This configuration file defines how Webpack should handle our source code, from transforming ES6 syntax to hosting our app on a local server.

Building and Serving the React App:
With our configuration in place, it’s time to see our app in action. Run the following command in your terminal:

npx webpack-dev-server --mode development

In case you encounter an error, make sure to check for typos, especially in the publicPath. Once successfully executed, open your browser and navigate to http://localhost:3000. Voilà! You should witness the React app we’ve been crafting.

Conclusion:
Congratulations! You’ve conquered the Webpack setup. This powerful tool is now at your disposal, streamlining the development process for your React application. As we move forward, we’ll explore more advanced features and optimizations to take your React development skills to new heights. Get ready for an exciting journey into the heart of modern web development!