Essentials in JavaScript App Bundling with Webpack

Essentials in JavaScript App Bundling with Webpack

• 1.
  JAVASCRIPT APP BUILDING ESSENTIALSIN
• 2.
  Khaled Al-Ansari Software Engineer@ Souq.com Email: khaledelansari@gmail.com Twitter: @khaledelansari Website: khaledelansari.com
• 3.
  ESSENTIALS IN JAVASCRIPTAPP BUNDLING WHAT IS BUNDLING AND WHY WE NEED IT? ‣ To answer this question we need to go back a little bit in history. ‣ At the beginning of front-end development file sizes were really small but by time files started to become larger because apps needs became larger and larger! So minifying concept came to solve this issue. ‣ Then CSS got complicated too, LESS came up, then SASS came up, and SASS needed Ruby lang to be installed so you can use it which was a bit annoying to do
• 4.
  ESSENTIALS IN JAVASCRIPTAPP BUNDLING ‣ Then some attempts came up to fix JavaScript syntax, before ES6 people had their own attempts to create a new language that will compile (or transpile) to ES5 like coffeescript and that needed a compiler, a CLI and a punch of other stuff. ‣ Then JavaScript people started to get inspire by other languages and they started implementing basic modular tools to help creating file segments like UMD, AMD and CommonJS. ‣ And evolution of JavaScript got it last shape with ES6 syntax and APIs which made people more excited about JavaScript and wanted to use these features as soon as possible so tools like Babel started to show up.
• 5.
  ESSENTIALS IN JAVASCRIPTAPP BUNDLING ‣ That’s a lot, right? Let’s write the main issue we talked about: ‣ Files sizes (for Both CSS & JavaScript) ‣ Maintaining CSS ‣ JavaScript Modularity ‣ Maintaining & understanding JavaScript (ES5) syntax ‣ And even more but let’s focus on these problems! ‣ To solve these issues a lot of scripts were written and different projects came up to solve one or more of the problems to get something more neat, let’s see.
• 6.
  ESSENTIALS IN JAVASCRIPTAPP BUNDLING ‣ JavaScript minification: ‣ SCSS (SASS) to CSS:
• 7.
  ESSENTIALS IN JAVASCRIPTAPP BUNDLING ‣ Every solution was written as a single task! That caused pain but it was needed to build the app! From the previous I think we can tell what bundling is. ‣ Bundling is preparing you app for shipment by going through different steps for to finalize each part of the app then mash all together. It’s like packaging shipments, you prepare everything ordered (needed) for the package to be complete then you wrap it up in a solid neat way to serve it as wanted. ‣ This is where Webpack comes in hand!
• 8.
  ESSENTIALS IN JAVASCRIPTAPP BUNDLING ‣ Webpack “is a bundler for modules. The main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.”, in a simpler words “a bundler for javascript and friends…”. Note: it’s built with Node.js ‣ Webpack is built on four main concepts: ‣ Entry ‣ Output ‣ Loaders ‣ Plugins ‣ Let’s talk about them while scripting! WHAT IS WEBPACK? AND HOW IT WORKS?
• 9.
  ESSENTIALS IN JAVASCRIPTAPP BUNDLING ‣ Entry: also known as entry point is the path to file that Webpack will consider as a start point in the dependency graph, it will collect modules from starting from this file. In a simpler words it the root of the app (you can multiple we’ll talk about it later) ‣ But wait! What is dependency graph?
• 10.
  ESSENTIALS IN JAVASCRIPTAPP BUNDLING ‣ “dependency graph is a directed graph representing dependencies of several objects towards each other”. In a simpler word it’s like a tree where every child in dependent in it’s parent, this allow Webpack to take non-code files like images and add them as a dependency. ‣ All of these modules will be connected recursively and served as a one file (mostly) to be loaded in the browser.
• 11.
  ESSENTIALS IN JAVASCRIPTAPP BUNDLING ‣ Output: After you finish bundling your app you need to tell Webpack what to do with it, the output value is the path for the place where you want to write the output in. ‣ Note: that we used Node.js path module and process global object, though it’s optional and you can write a relative path instead ‣ Note: hash and name (along with id) are values from Webpack used for naming
• 12.
  ESSENTIALS IN JAVASCRIPTAPP BUNDLING ‣ Loaders: Webpack treat every file as a module and then add it to the dependency graph and to do so loaders will convert files to modules, a JavaScript modules! Yes because Webpack only understand JavaScript. ‣ Note: every file type got it’s own loader. ‣ Note: you can use multiple loaders for one file type in case of converting but you need to put them in the proper order.
• 13.
  ESSENTIALS IN JAVASCRIPTAPP BUNDLING ‣ Plugins: after transforming files with loaders you need to perform actions on the files like minifying or copying and that can be done with Webpack plugins ‣ Note: you need to get each plugin with require(). ‣ Note: Webpack offers a lot of useful built-in plugins + different integrations with popular tools, also the community got more to offer so make sure to search you options.
• 14.
  ESSENTIALS IN JAVASCRIPTAPP BUNDLING ‣ So we solved bundling the final output what about developing the app? Webpack got that covered with it’s own dev server called Webpack-dev-server (DUH!) it will take the same config file, just add server config for it, and keep watch it to see if any changes happened to do a re-compile for the files. ‣ Example for server config inside Webpack config:
• 15.
  ESSENTIALS IN JAVASCRIPTAPP BUNDLING ‣ Now we know what is Webpack and how it work, let’s see how to write a clean readable config file for it: ‣ 1- Use Arrays for multiple loaders ‣ One of Webpack nasty syntax writing is load, example: ‣ Dont use this ! Use an Array of loaders instead TIPS AND TRICKS TO AVOID COMMON MISTAKES
• 16.
  ESSENTIALS IN JAVASCRIPTAPP BUNDLING ‣ 2- Avoid complex regular expressions in loaders, always keep it simple ‣ 3- Create separate files for different environments
• 17.
  ESSENTIALS IN JAVASCRIPTAPP BUNDLING ‣ Webpack is not perfect and there’s some issues in it, here’s a couple I faced: ‣ 1- having an empty JS file after extracting CSS from it, this can be solved by importing CSS inside same entry point as JavaScript instead of creating new entry point
 Reference: https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/54#issuecomment-85498794 ‣ 2- having new build even if there’s no changes, this is hell! You’ll force browser to clear cache for nothing. This have been solved by a plugin that will create a hash for each build and compare it to the previous to see if there’s any changes to delete the files or not
 Reference: https://github.com/kossnocorp/assets-webpack-plugin COMMON ISSUES AND HOW TO SOLVE THEM
• 18.
  ESSENTIALS IN JAVASCRIPTAPP BUNDLING ‣ Webpack is good but it’s not for everybody, if you have a complex app with different modules and dozens of components then Wepack is for you. ‣ If you’re delivering a single JavaScript file for a specific task or you’re creating a library/plugin to be used in different projects will Webpack is not for you since you’re looking for simplicity and you want to engineer this file in according to your specifications WHEN TO USE WEBPACK?