JS Questions: What is Webpack?

This is the tenth in a series of posts I’m writing that aims to provide concise, understandable answers to JavaScript-related questions, helping me better understand both foundational concepts and the changing landscape of language updates, frameworks, testing tools, etc.

What is Webpack?

JavaScript-based applications have increasingly complex systems and interactions. They send and receive data; they create a user interface; they have non-JavaScript assets such as styling and images; and they incorporate outside packages of reusable code. The purpose of Webpack is to bring together all the disparate parts and turn them into one file, made readable to the browser rendering the application. This job is called module bundling. 

There are two types of ways that code is transformed in Webpack and these processes are handled by separate entities: loaders and plugins.

Loaders take in the application’s files, turn them into modules that can be read by a JavaScript engine, and add the modules to a dependency graph. A dependency graph is like a map (written in JS) showing how each module is related to other modules.

Different loaders can handle different tasks in the transformation process. The babel-loader, for example, takes in ES2015 (or later) code and transpiles the code to an earlier version of JS syntax.

While loaders create modules, plugins alter the modules to optimize them for computer processing, dependency injection, debugging, and other tasks. The UglifyJS plugin, for example, minifies code in order to make it run faster. 

When all dependencies have been added to the graph and all processes have been run, the static file is handed off to the browser to load.

Webpack can be configured with whichever loaders and plugins a project needs, though there’s also an ‘out-of-the-box’ option for React developers. React, a popular library for building JS front end, has community support for Webpack. The package, Create React App, can be used to generate files for a new React application preconfigured with Webpack. The Webpack-enabled functionality, including hot reloading (which adds, removes, or updates modules, without a page needing to fully reload) make it especially handy.

Other module bundlers exist (Browserify is considered the first of its kind), but Webpack has become an industry favorite.

 

Resources:

Advertisements

JS Questions: What’s a Transpiler?

This is the seventh in a series of posts I’m writing that aims to provide concise, understandable answers to JavaScript-related questions, helping me better understand both foundational concepts and the changing landscape of language updates, frameworks, testing tools, etc.

What’s a Transpiler?

JavaScript transpilers emerged when the latest big update to JavaScript (ES2015) was released, which brought about some major changes to the language (such as arrow functions and classes). These updates have been good for developers, making it easier to write code in an intuitive and concise manner.

Before ES2015, the most recent update to the language had been in 2009, and since 2015, two more updates have been released, ES2016 and ES2017. With the recent rapid changes to JS, web browsers like Chrome, Firefox, and Safari have been unable to maintain compatibility with the language, and transpilers are used to bridge the gap between them.

This table breaks down different browsers’ compatibility with JS versions by feature, giving a sense of the types of issues that must be accounted for by web browsers with language updates.

Transpilers such as Babel take care of this compatibility issue by transforming code to follow earlier conventions the browser can support. Essentially, a transpiler allows a programmer to have the convenience of coding in the most recent version of JS, while still being able to revert the code to an earlier standard. The transpiled code probably won’t be as readable as it would be if it had been written by a programmer (check out Babel’s repl to test this), but it shouldn’t matter–transpiled code will be handed off to the compiler to transform into computer-readable code.

Sources