Start using Webpack right now

Some people pray for rain. I pray for a standardized JavaScript browser build process. In lieu of a true standard de jure, as I write this, we’re stuck with the de facto best option: webpack.

“Build process?” you say…

“What are we building, exactly? JavaScript doesn’t compile…”

It’s true, you could just plop your raw JavaScript files into <script> tag after <script> tag and fire up the nearest web server, but this is not an ideal approach. Building your front-end code (and other assets, like CSS and fonts) into optimized bundles solves several pesky problems.

Write modular JavaScript

Most languages use modules. Modules reference other modules and dependencies are resolved automatically. Unfortunately, browser-based JavaScript has no native support for modules. All scripts run in a “global namespace”.

Without a build process, you could achieve the illusion of “modularity” by assigning each “module” to a symbol within its own source file, and then manually ordering all your <script> tags within index.html so that module dependencies are resolved properly. Or, modularity be damned, you could just write all your code in one big 10,000-line JavaScript file. Both of these approaches are extremely impractical.

Webpack lets you use Node.js-style modules in browser-targeted code. Using ECMAScript 5, you import and export modules like so:

var module = require('module');  // Import
module.exports = {};             // Export

This ad hoc syntax lets you define and reference modules, and webpack automatically resolves the dependencies at build time. ECMAScript 6 uses reserved keywords import and export to elevate modules as a native language feature:

import module from 'module';
export default {};

When you load ES6 source code files using Babel, which converts ES6 to browser-compatible JavaScript, webpack is able to understand import and export as aliases for require and module.exports.

Import NPM modules

You can also use import to reference an installed NPM module. Keep in mind that any code imported in this way must run in the browser, so modules that rely on external dependencies like C libraries will not work, as they would in Node.js on a host machine.

Optimize your executable code

A browser downloads your code over a network and interprets it on the fly, so fewer, smaller files and less code will improve performance. Webpack resolves the dependencies between all of your source modules and outputs one or more static files optimized for browser consumption. These files will be referenced in index.html as <script> and <link> tags.

Webpack can also split its output between multiple chunks, based on different entry points in your source code. For example, you can keep your NPM dependencies in one chunk, and your actual core application modules in another. This lets the browser cache chunks that haven’t changed, to load them more quickly. A chunk might be a single JavaScript file, or it could be a JS file plus other required assets like a CSS file and a font file.

Set up webpack

You need to create a webpack.config.js file in your project’s root directory (where package.json is) to run a webpack build.

The details of webpack configuration are beyond the scope of this quick overview. Besides, the useful book SurviveJS — Webpack (found at http://survivejs.com/webpack/) already gives a clear, comprehensive overview of this task.

You may freely use my webpack project template at https://github.com/alexyuly/webpack-react-template, as a possible starting point for a bare-bones web application.

Happy coding!