Webpack Overview
//English
Hi guys, since the last weeks I've been trying something different than the usual, you may know that I love gulpJS, but I found a new "task-runner": Webpack!
<!-- WTF is Webpack? -->
To be honest, Webpack isn't a "task-runner", It's a module bundler. What this means is that Webpack takes your src code and transforms it into one single file which has all your src code organized as you have but improving the repeating calls, requires, imports, etc. Why is this important? well the heavier your files are, the more time it takes to download and render your website.
Webpack is meant to be a single module bundler for all your Web Apps. This means that you only need Webpack, not anything else, for instance: You have an SPA that needs Angular to work but instead of using purely JS, you decide to use coffeescript, then you can use gulp and create a task called: bundle-js and add the proper pipes, right? Well with Webpack, this process is a lot easier, you just need to tell Webpack your entry file (main file) and your output, just that! no more, no less...
Webpack can be configured to not only handle JS files, you can use it to handle even CSS, HTML, etc. using the: loaders, the loaders in Webpack are just modules that are going to translate everything to a common language: Javascript and then once those files are properly bundled, the loaders will be translated again to the original language.
NOTE : Before you continue, to understand the code snippets, please read the file: webpack.config.js first. It will be in almost all cases the last file
<!-- Say Hello! -->
I think that everybody agrees with me when we say that Hello World would be the easiest thing we ever do, but for this first example I think it will show exactly what Webpack can do:
The result will be something like this:
As you can see you can work as you normally do with Node and just point to your main file: 'index.js', webpack will bundle all the needed files into 1! As easy as that! No more, no less!, this is a lot easier as if you were using Browserify or RequireJS.
<!-- ES6 -->
The previous example was the easiest one, let's do another one, similar to the previous one, but now I'm going to use ES6:
The result will be something similar to this:
The above example is a little bit complex because now I've included a loader! And if you remember, I told you before about the Loaders, but, let's go deeper: Loaders
<!-- Loaders! -->
What is a loader? well if you go to the webpack documentation you will see the following description:
"Loaders are transformations that are applied on a resource file of your app. They are functions (running in node.js) that take the source of a resource file as the parameter and return the new source."
Let's break the previous paragraph into 2 main points:
Well guys, to summarize what I tried to tell you today, Webpack is a new tool even more powerful than Gulp or Grunt, because we just need to config 1 file to get 1 single file ready to publish! How is it different from Gulp or Grunt? well it's easier to configure Webpack and it's easier than you do with Gulp (believe it or not!), because you point Webpack to your entry file (the root file) and add the needed loaders (functions, which are going to translate everything into 1 single language) and finally you put that file where you want to create that file! (you tell webpack in which directory to create the output file and how you're going to name it). It's as easy as counting: 1,2..3! just 3 steps to do work of multiple tasks on Gulp or Grunt.
Try Webpack once and you'll fall in love! I promise...and I promise that I'm going to write about how to create a working environment using only Webpack! How to develop, serve and test using Webpack, but for now I think it's enough. See you guys ^_^/ If you have any question or concern, please let me know.
If you like this post, please follow me on Twitter XD
//Español
Proximamente...
Hi guys, since the last weeks I've been trying something different than the usual, you may know that I love gulpJS, but I found a new "task-runner": Webpack!
<!-- WTF is Webpack? -->
To be honest, Webpack isn't a "task-runner", It's a module bundler. What this means is that Webpack takes your src code and transforms it into one single file which has all your src code organized as you have but improving the repeating calls, requires, imports, etc. Why is this important? well the heavier your files are, the more time it takes to download and render your website.
Webpack is meant to be a single module bundler for all your Web Apps. This means that you only need Webpack, not anything else, for instance: You have an SPA that needs Angular to work but instead of using purely JS, you decide to use coffeescript, then you can use gulp and create a task called: bundle-js and add the proper pipes, right? Well with Webpack, this process is a lot easier, you just need to tell Webpack your entry file (main file) and your output, just that! no more, no less...
Webpack can be configured to not only handle JS files, you can use it to handle even CSS, HTML, etc. using the: loaders, the loaders in Webpack are just modules that are going to translate everything to a common language: Javascript and then once those files are properly bundled, the loaders will be translated again to the original language.
NOTE : Before you continue, to understand the code snippets, please read the file: webpack.config.js first. It will be in almost all cases the last file
<!-- Say Hello! -->
I think that everybody agrees with me when we say that Hello World would be the easiest thing we ever do, but for this first example I think it will show exactly what Webpack can do:
The result will be something like this:
As you can see you can work as you normally do with Node and just point to your main file: 'index.js', webpack will bundle all the needed files into 1! As easy as that! No more, no less!, this is a lot easier as if you were using Browserify or RequireJS.
<!-- ES6 -->
The previous example was the easiest one, let's do another one, similar to the previous one, but now I'm going to use ES6:
The result will be something similar to this:
The above example is a little bit complex because now I've included a loader! And if you remember, I told you before about the Loaders, but, let's go deeper: Loaders
<!-- Loaders! -->
What is a loader? well if you go to the webpack documentation you will see the following description:
"Loaders are transformations that are applied on a resource file of your app. They are functions (running in node.js) that take the source of a resource file as the parameter and return the new source."
Let's break the previous paragraph into 2 main points:
- "...are applied on a resource file of your app..." -> This doesn't mean that each loader is going to be applied to all your files, if you see the documentation, a Loader is just an Object, each object/loader has an attribute called: test this attribute can have either a RegEx or String value, this means that webpack will pass all the names of your files, if a filename pass this "test" (The file name will be tested against the RegEx) then the content of that file will be passed to this loader. Besides, there are 2 optional attributes that can include or exclude files to the context of your project: include and exclude, both receive the same type of value as test, RegEx or String and work as they name say, include : include files/folders to the current context and exclude : exclude those files within the context app
- "...take the source of a resource file as the parameter and return the new source..." -> This sentence is the key point of the loaders: transform the content into content that can be interpreted by webpack, let's put an example: EcmaScript 6 and above, as you may know (if not, you will know) ES6 is not fully supported by all the browsers or environments, so you basically need to translate your ES6 code into ES5, webpack cannot do this by itself, so BabelJS, creates a loader, which is going to take your ES6 code and translated in optimized ES5 code. This step is required now, but in the future will be omitted, because the more time pass, the support to ES6 more grow.
<!-- Let's see it in action -->
I've prepared also an small project made using Webpack, It's just a small "Hello World App". Please see the code I used below:
The result will be something similar to this:
As you can see, I used Bootstrap to give it some styling and the app is pretty much easier to do and to understand but it shows what you can do with Webpack.
NOTE: To see these 3 examples working, please go to my Cloud9, where I stored the last 3 examples or get them from github :)
<!-- Summary -->
NOTE: To see these 3 examples working, please go to my Cloud9, where I stored the last 3 examples or get them from github :)
<!-- Summary -->
Well guys, to summarize what I tried to tell you today, Webpack is a new tool even more powerful than Gulp or Grunt, because we just need to config 1 file to get 1 single file ready to publish! How is it different from Gulp or Grunt? well it's easier to configure Webpack and it's easier than you do with Gulp (believe it or not!), because you point Webpack to your entry file (the root file) and add the needed loaders (functions, which are going to translate everything into 1 single language) and finally you put that file where you want to create that file! (you tell webpack in which directory to create the output file and how you're going to name it). It's as easy as counting: 1,2..3! just 3 steps to do work of multiple tasks on Gulp or Grunt.
Try Webpack once and you'll fall in love! I promise...and I promise that I'm going to write about how to create a working environment using only Webpack! How to develop, serve and test using Webpack, but for now I think it's enough. See you guys ^_^/ If you have any question or concern, please let me know.
If you like this post, please follow me on Twitter XD
//Español
Proximamente...
+12.39.04.png)
+12.39.41.png)
Comments
Post a Comment