Adding Webpack Dev Server and Sass, Stylus, or LessCSS with React

In the last recipe, we added React to Webpack 4, and we split our Webpack configuration, but in the end, we were just able to build our bundle and run the application as a static page. In this recipe, we are going to add the Webpack Dev Server to run our React Application in an actual server and restart the server every time we make a change. Also, we are going to implement CSS preprocessors such as Sass, Stylus, and LessCSS.

Getting Ready

For this recipe, you will need to install the following packages:

    npm install webpack-dev-server css-loader extract-text-webpack-plugin@v4.0.0-beta.0 style-loader

If you want to use Sass in your project, you have to...