
“This sounds a lot like what Gulp already does for me." Code Splitting Instead of following a list of tasks like Grunt or Gulp, Webpack analyzes your dependencies tree and bundles your assets (JavaScript files, CSS, Sass, HTML, etc.) into a smaller subset of files. Webpack is a module bundler - a build tool, not a task runner. The browser must make requests to get all of these. Even minified and concatenated, if you have a large number of application files and/or dependencies, you’re pulling in fairly large CSS and JS files.Grunt and Gulp still require a fair amount of manual configuration and boilerplate.You must remember to manually identify your dependencies as strings. Dependency injection becomes more complicated on minified files - for example, Angular’s $scope is no longer $scope when minified, but might be something like a.You have to spend time worrying about the order in which you’re loading your script files.

Error messages generally are less helpful when you’re dealing with concatenated, minified files.There are several problems with this approach (and if you’ve built a single-page application of any complexity, you’ve probably run into issues with them): However, even if you have a sane build process that concatenates all of your files in production, you probably still have an index.html file somewhere in your application that looks something like this:
#Webpack livereload browser download zip
This is especially true if you’ve been in the web development game long enough to remember the days when you’d have to download zip files and manually put them in a /scripts directory - tools like NPM have made it far easier to manage your dependencies, and it’s easy to think that the tried-and-true tools are “good enough." If you’re anything like me, you probably took one look at it, decided not to bother with its hipster black magic, and went back to using Grunt or Gulp for all of your front-end tasks. You might have heard some of the buzz around Webpack in the last few months.
