Menu
I am fairly new to webpack and I have a Vue project using the vue cli. While analyzing the webpack bundle (built in production mode using vue-cli-service build) using webpack-bundle-analyzer, I found that one particular file bn.js is being included multiple times in the bundle. When running npm ls bn.js I found that it's parent dependency is webpack itself.
`-- [email protected]
`-- [email protected]
`-- [email protected]
+-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| `-- [email protected]
| `-- [email protected]
| `-- [email protected]
+-- [email protected]
| `-- [email protected]
+-- [email protected]
| +-- [email protected]
| `-- [email protected]
| `-- [email protected]
`-- [email protected]
`-- [email protected]
So my question is that why is webpack including it's own dependencies in the final bundle when webpack is added as a devDependency (earlier it was a dependency, then I changed it to devDepenency) in the project?
Or if this is the correct behavior then please point me to any docs/resources explaining this behavior.
939
This article will explore a module bundler called Webpack, share with you how to bundle up an application with Webpack. Webpack supports CommonJs, AMD, and ES6 module formatting systems. Webpack takes your Javascript files, dependencies as input, bundles them, and then outputs compressed optimised files.
This approach considers that since your production app (aka the bundle you built with Webpack) can just run by itself, it means you have no production dependencies. Thus, all dependencies are devDependencies . This is how VueJs and React specify their dependencies.
Webpack is one of the available module bundlers that processes JavaScript code, as well as all static assets, such as stylesheets, images, and fonts, into a bundled file. Processing can include all the necessary tasks for managing and optimizing code dependencies, such as compilation, concatenation, minification, and compression.
This EntryDependency holds the module's request (i.e the path to the file) and also offers a way to make something useful of that request, by mapping to a module factory, namely NormalModuleFactory. A module factory knows how to create entities useful to webpack from just a file path.
Well it turns out that it was a npm thing. Earlier I had webpack as a dependency in package.json. Then I ran npm uninstall webpack --save and then again did npm install webpack --save-dev in order to make it a dev dependency. Turns out that it wasnt enough. I stopped getting webpack dependencies in my bundle only after I deleted my node_modules folder and then did npm install again.
164
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
