Menu
I was playing with create-react-app and found out that it does put all packages under normal "dependencies". I built the app and found out the 'build' folder size was 2.66 MB.
Then I manually moved the packages not needed in production to "devDependencies" and built again, but the 'build' folder size was still 2.66 MB.
Is there some logic in the webpack.prod.js file, that knows what is needed even if all the packages are listed under "dependencies"?
If so, is there still some benefits using "devDependencies" in package.json?
228
The webpack and app dependencies can be placed in devDependencies . This scenario is also used if we are creating library packages, instead of servers. Others will install the project as a package, and require the pre-built files in their project.
devDependencies are those packages in the package. json file that you need only for project development purposes. Example- Babel, Webpack, etc. You require these packages to test and run your project on the localhost.
Dev Dependencies: In package. json file, there is an object called as dev Dependencies and it consists of all the packages that are used in the project in its development phase and not in the production or testing environment with its version number.
"dependencies" : Packages required by your application in production. "devDependencies" : Packages that are only needed for local development and testing.
I agree with @dschissler that everybody is doing this wrong. A browser app built by webpack has no runtime node dependencies, and thus all frontend dependencies should be listed as devDependencies.
Among all types of dependencies in package.json, dependencies and devDependencies are the most frequently used, and the concepts are straightforward. Meanwhile, optionalDependencies and bundledDependencies are rarely used. The interesting and troublesome one is peerDependencies.
Specifying dependencies and devDependencies in a package.json file. To specify the packages your project depends on, you must list them as "dependencies" or "devDependencies" in your package's package.json file. When you (or another user) run npm install, npm will download dependencies and devDependencies that are listed in package.json ...
To specify the packages your project depends on, you must list them as "dependencies" or "devDependencies" in your package's package.json file. When you (or another user) run npm install, npm will download dependencies and devDependencies that are listed in package.json that meet the semantic version requirements listed for each.
When webpack builds your project it determines everything your project depends on, starting at the entry file, and then combines, uglifies and so on, and disregards everything else.
For example, if index.js is your entry file and it depends on moment.js, moment.js will be included in your build regardless if it's a dependency or devDependency.
The reason for this is npm distinguishes between dependencies and devDependencies, while webpack only distinguishes between that which is needed and that which is not.
If so, is there still some benefits using "devDependencies" in package.json?
I still use devDependencies, but solely as a means of ordering my package.json, but everything can safely be in dependencies when a tool such as webpack is used to build the production site/app
112
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
