Webpack is used to bundle your .js modules into a single file, and you can think of modules as files. 

JavaScript does not natively support file includes like some other languages. So that is where Webpack comes in, it will bundle your files so that almost all browsers can read them.

It also helps us organise our JavaScript app into multiple files. Which we can then import and use them when needed. 

Webpack is also much more than just module bundler, it could also be used as task runner, and some developers are using it exactly like that. Although in this video we are not going to go into detail about Webpacks capabilities,  I will show you an example of how you can compile scss files with Webpack, so that you can get a taste of what Webpack can do.

In this episode we are going to cover basics of Webpack module bundler.

Webpack

We already learned about [Command Line](http://watch-learn.com/video-tutorials/basic-frontend-tools-command-line) and [npm](http://watch-learn.com/video-tutorials/basic-frontend-tools-npm-node-package-manager) so now we are going to use that knowledge to install a task runner called Gulp.  

Gulp is one of the most popular task runners and in this episode I will show you how to setup some basic tasks for your project. 

Tasks that will be covered in this episode are: 

* Setting up autoprefixer
* Setting up SCSS compilation of files
* Watching our files
* Setting up BrowserSync

In this episode we are going to go through the basics of creating tasks that are going to be used by our task runner called Gulp.

Tutorials tagged with: task runner

Get in touch