NPM - dependencies vs devDependencies


Webpack is one of those technologies that has become increasingly important and yet struggles to be clear and obvious for most developers. One of the best ways to get up to speed is to start from scratch (empty package.json) and build up one piece at a time to understand how it works. Below are some notes about package.json and how dependencies are established.

- January 7, 2020

Rest of the Story:

Technically, when using a bundler like webpack, the result will not make a difference with regard to the output of your bundling process.

That being said, dividing the packages in dependencies and devDependencies still helps you (and others looking at your package.json) to understand which packages are meant to end up being a part of the bundle created (dependencies), and which are needed to build the bundle only (devDependencies).

Just remember main principle:
-> If you need package in production put it into dependencies (most likely axios should be in dependencies in your case).
-> If you need package only during development, put it into devDependencies (e.g. unit-test libraries, which isn't needed in productions should be in devDependencies

Summary of important behavior differences:

dependencies are installed on both:
npm install from a directory that contains package.json
npm install $package on any other directory

devDependencies are:

also installed on npm install on a directory that contains package.json, unless you pass the --production flag.
not installed on npm install "$package" on any other directory, unless you give it the --dev option.
are not installed transitively.

Reference: StackOverflow