I'm used to simple and small JS projects where the JS dependencies are concatenated and minified as part of the build process using something like gulp and the script tag in the html contains the hardcoded path to that minified JS file. It's not elegant and probably has several disadvantages, but conceptually it's a simple approach.
But with bigger projects, I understand it's good to look at packaging systems like bower, browserify, requirejs, webpack, etc. What's the benefit to using them as opposed to the way I'm used to doing it? What are the main ways it helps the development process?
Are these technologies I mentioned competitors to each other, or are some of them fulfilling different purposes and can be used together? What is the difference between them?
Also I looked into webpack and it's described in some places as though it's a replacement for gulp. I thought gulp is a build system and different from these packaging tools?
EDIT: How do these concepts relate to AMD or CommonJS?