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
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