Setting up a project

In this section, we will look at how to set up a very simple Webpack application, using Babel to transpile the JavaScript and CSS modules to load our locally scoped CSS into the bundle. We will also go through all the features of CSS modules and look at the problems they can solve. The first thing to do is move to an empty folder and run the following command:

npm init

This will create a package.json file with some defaults.

Now, it is time to install the dependencies, with the first one being Webpack and the second being webpack-dev-server, which we will use to run the application locally and to create the bundle on the fly:

npm install --save-dev webpack webpack-dev-server webpack-cli

Once Webpack is installed, it is time to install Babel and its loader. Since we are using Webpack to create the bundle, we will use the Babel loader to transpile our ES6 code within Webpack itself:

npm install --save-dev @babel/core @babel/preset-env ...