Install Webpack Dependencies

Since you’ll be writing your code in multiple modules (files) and it will depend on other modules (like React), you need a module bundler to translate all these modules into something that can work in all browsers today. You can use Webpack for that job.

To install the packages you need for Webpack (which is also a “module”), type the following command:

npm i -D webpack webpack-cli

If the command ran successfully, it should have created a new folder named “node_modules” in your project folder and downloaded several modules into this folder (into various folders), of course including the Webpack package as well. 

Instead of a run-time dependency, the “ — save-dev” option adds a “dev dependency” to the package.json file. This indicates that the Webpack package is only useful during development. That would make sense, as once we have created the “bundles” as we require, we would use them directly in production. The package.json file should look similar to this:

{
 // ...
 },
 "devDependncies": {
  "webpack": "^5.69.1",
  "webpack-cli": "^4.9.2"
 }
}

Official website: webpack bundle your styles