#WHY USE WEBPACK VS GULP CODE#

Let’s look at an example where we have a basic dev server, code transpilation, auto-prefixes and some basic plugins to help us with our CSS: const ExtractTextPlugin = require('extract-text-Webpack-plugin') Ĭonst autoprefixer = require('autoprefixer') Ĭonst svgFragments = require('postcss-svg-fragments') Ĭonst pxtorem = require('postcss-pxtorem') Ĭonst path = require('path') module.exports = ), However, as Uncle Ben said: “with great power comes great responsibilities”, because Webpack is so powerful and flexible, the configuration file can become a total mess and be extremely difficult to parse. When we run webpack on the command-line, a file called bundle.js will be created with all of our resources bundled.Īgain, if you really think about it, Webpack is really just an advanced build process that has a lot of advanced features. With all that in place, all we need is to reference the bundle.js file in our HTML page. On that configuration file we will tell Webpack the entry point of our application, the output file that should be generated once everything is bundled and any other additional rules or tasks we might want it to run. The Webpack configuration file s usually stored in a file named in the project root folder. With Webpack installed, we can look at the code.

#WHY USE WEBPACK VS GULP INSTALL#

First, we can easily install it through either Yarn or NPM: OK, so now that we know what Webpack is and what it can do, let’s see how we can use it. You can think of Webpack as an advanced build system.

Bundle up smaller modules of JavaScript so we are not serving your entire application to every single user that just visits your homepageĪs mentioned above, this is no different than what you would have in a build system.

Have dead code elimination - that basically means that Webpack can find code that you are not actually using and not add it to the final bundle.

Watch for file changes and re-run tasks.

So, because Webpack can easily replace Gulp, I do believe that we can in fact define it as a build system.Īside of bundling all your resources, Webpack, if configured right, can do much more. In fact, because they both are so similar, there should not be an instance where you would use both together - unless you have a Gulp process already in place and you do not want to give up on it. That’s very similar to what Webpack does. For example, with Gulp, we can add a SASS package to our pipe to get the CSS output that we expect. If you come from Gulp - or Grunt - Webpack basically does the same things: it takes your files, runs them through some sort of conversion/transpiler system and spits out something the browser can understand. However, theoretically, it can be seen as a build process. Definitions such as module loader or module bundler were preferred, because those terms were more aligned with the main purpose of Webpack: to be a bundle system. When Webpack came out, people were very careful to not call it a build process. This is interesting, right? We are taking a bunch of stuff, running it through something - Webpack - and we are getting a bundled version that can be understood by the browser. It takes all files (SASS files, LESS files, JavaScript files with modules and dependencies, images, etc) that are connected in some way and bundles them into standard Javascript, CSS, PNG and JPG files. So, what is Webpack? In a nutshell, Webpack is a bundle system. Even if you don’t know what Webpack is, you probably have heard about it and how powerful it can be and the classic “that’s what we should be using now”.īut before you drop everything else to hop on to the Webpack bandwagon, it’s worth to understand what exactly Webpack is, how it works and how it compares to other build systems, most specifically Gulp, which is my favorite and the most widely used today.

Why use webpack vs gulp