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?
Browserify, RequireJS, WebPack are all module loaders. Both AMD and CommonJs are types of modules. Many (most) javascript libraries such as JQuery can be loaded as modules. Require has been around for a while and its IP is under the DOJO foundation. Browerify is gaining in popularity mainly due to server side JS (node) also works client side.
Client side javascript module loaders on slant.co.
Bower is a package manager mainly used to install Git repos and it can also link into GULP or Grunt which are front end build tools i.e. they use the requireJS optimizer to minify, etc.
You can compare the three module loaders, Bower is not comparable as once its copied packages down for you that's pretty much it.