We will first add the Webpack Dev Server:

1. Once you installed the webpack-dev-server dependency, we need to add a new script to start the application in our package.json:

    "scripts": {
      "start": "webpack-dev-server --mode development --open",
      "build-development": "webpack --mode development",
      "build": "webpack --mode production"
    }

2. As you know, the --mode flag specifies the mode we want (the default is production), and the --open flag opens the browser when we start the application. Now you can run the application with the npm start command:

3. Your application was opened using port 8080, which is the default port of webpack-dev-server. If you want to change it, you can use the --port flag to specify which port you want to use:

"start": "webpack-dev-server --mode development --open --port 9999"

4. The cool thing about webpack-dev-server is that if you update any component, you will see the change reflected instantaneously. For example, let's modify our Home component:

  import React from 'react';

  const Home = () => <h1>Updated Home</h1>;

  export default Home;

5. You can see the reflected change in the same page without refreshing the page manually:

6. Let's add Sass, Stylus, or LessCSS to our project to have some styles in the application. You have to edit the file located at webpack/configuration/module.js and add style-loader, css-loader, and the loader we want for sass (sass-loader), stylus (stylus-loader), or less (less-loader):

  export default {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /.scss$/, // Can be: .scss or .styl or .less
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              // Enables CSS Modules
              modules: true, 
              // Number of loaders applied before CSS loader
              importLoaders: 1, 
              // Formatting CSS Class name
              localIdentName: '[name]_[local]_[hash:base64]', 
              // Enable/disable sourcemaps
              sourceMap: true, 
              // Enable/disable minification
              minimize: true 
            }
          },
          {
            loader: 'sass-loader' // sass-loader or stylus-loader
                                  // or less-loader
          }
        ]
      }
    ]
  };

7. Using Sass, we can create the Home.scss file to add some styles:

  $color: red;
  .Home {
    color: $color;
  }

8. In the Home component, you can import the Sass file like this:

  import React from 'react';
  import styles from './Home.scss'; // For Sass
  // import styles from './Home.styl'; // For Stylus
  // import styles from './Home.less'; // For Less

  const Home = () => <h1 className={styles.Home}>Updated Home</h1>;

  export default Home;

9. Each import line is for a different preprocessor. Use the line you want and remove the others. Sass generates this style:

10. If you want to use Stylus, create the Home.styl file and change the configuration in the module.js file from the Webpack configuration:

  $color = green

  .Home
    color: $color

11. If you want to use Less CSS, do the necessary changes on the Webpack configuration and then use this file:

  @color: blue;

  .Home {
    color: @color;
  }