Webpack

This article is part of my personal wiki where I write personal notes while I am learning new technologies. You are welcome to use it for your own learning!

The Case for Webpack

Modern JavaScript projects aren’t what they used to be. In order to have an awesome development environment and produce world class applications you need a front-end build pipeline that helps you with all these goodness:

bundling

minification

transpilation

dependency management and module loading

linting

other optimizations (tree shaking, remove unused css, etc)

framework specific improvements

Webpack offers a solution to all these needs! Behold!

Webpack Basics

The easiest way to get started with webpack is by using the cli. You can install webpack using npm:

$ npm i -g webpack

You can use webpack directly on a bunch of javascript files and package them together in a bundle:

$ webpack app/main.js bundle.js

Or you can use a configuration which is far more common in real world projects. We usually name the configuration webpack.config.js:

module.exports ={
entry:'app/main.js',// it can also be an array
output:{
filename:'bundle.js'}};

As you can appreciate from the example above, a webpack configuration file is just a vanilla commonJS module. This configuration is the equivalent to webpack app/**/*.js bundle.js. In order to run webpack with a configuration file you just type:

$ webpack

Just like other common task runners, webpack has a watch mode. This means that you can tell webpack to watch a series of files for changes and run again every time one of these files changes. You can enable watch mode like this:

module.exports ={
entry:'app/main.js',// it can also be an array
output:{
filename:'bundle.js'},
watch:true};

$ webpack --watch app/**/*.js bundle.js

A cool thing that differences webpack from other task runners is that webpack includes a web server called dev server. It is distributed as a separate npm package called webpack-dev-server. Again you can install it globally via npm:

$ npm i -g webpack-dev-server

You can use it in a similar way than the webpack cli:

# show status bar
$ webpack-dev-server

# don't show status bar
$ webpack-dev-server --inline

This will start an http server and serve your webpack packaged application.

Power Up Webpack with Loaders

You can add more functionality to your webpack pipeline through loaders. For instance, you can have a loader to transpile your SASS style sheets, or to transpile your ES6 code or to lint your code. Loaders are distributed as npm packages, you can install them like thisÖ

Would you like to receive more articles like this one on programming, web development, JavaScript, Angular, developer productivity, tools, UX and even exclusive content like free versions of my books in your mailbox? Then sign up to my super duper awesome inner circle.

Did Ya Know I've Written Some Books?

I have! The JavaScript-mancy series is the lovechild of three of my passions: JavaScript, writing and Fantasy. In the pages of each one of the books of the series you’ll find a breadth of JavaScript knowledge, delivered with a humorous and casual style of writing and sprinkled with Fantasy at every turn.

They are the weirdest and quirkiest JavaScript books you'll ever find. There's nothing out there quite like it.