Webpack and Babel Flashcards
What is Webpack?
Webpack works by examining your code, starting at its entry point, and recursively scanning the import statements to find all the modules your code uses. It builds a dependency graph and analyzes it to find and remove code that is not in use (using a process known as tree shaking). It renames functions, variables, classes, etc., to ensure there are no name conflicts and to minimize and obfuscate the resulting JavaScript code. It performs similar optimizations on HTML, CSS, and image files. The result is a small number of files that can be easily sent to a browser by a Web server.
What is the advantage of using Webpack (or a similar bundler)?
They bundle code to make it easily downloadable, remove unused code and also minify/obfuscate code by renaming variables/functions to just a few letters to make bundled code even smaller, and also obscured code to make it less readable.
What is Babel?
Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Features include: transform syntax, polyfill features that are missing in your target environment(though a third-party polyfill such as core-js), source code transformations (codemods), and more!
What is the advantage of using Babel (or a similar transpiler)?
The advantage is so that code written with new language features can be run on devices, browsers, and other systems that execute that language in older versions of the language.
