Introduction to Webpack

Module bundling, Loaders, Plugins, Babel

Kirill Shevchenko
Oct 4, 2017 · 4 min read

Webpack is a module bundler for modern JavaScript applications. The import and export statements have been standardized in ES2015. They are not supported in browsers yet, but webpack does support them out of the box. But actually it’s more powerful tool which can help us build whole our front-end.

Installing

Let’s start with initializing package.json by using npm init command.

Installing globally locks you down to a specific version of webpack and could fail in projects that use a different version. Therefore, we will install it locally.

Webpack will be added to devDependencies

Command Line Interface (CLI)

Because we are installing webpack locally we have to run it through npm scripts

Then try to run it:

Next, we’ll see that you need to initialize the config:

Init configuration file

In order to generate the index.html file, we will use one of the most popular plugins HtmlWebpackPlugin. What plugins are we’ll look at later in this article.

entry —main file of the app which includes whole modules.

output —option containing path to output directory and the name of the bundler file(by default variable name is main.js)

plugins — list of webpack plugins with options.

To see how this configuration works, we need to create two JS files.

The simplest module.

Which will be imported and used in our entry point:

Let’s build it with webpack.

It will generate two files in build folder.

  • main.js - our bundled js code
  • index.html - html document which includes main.js and Webpack app title.

Multiple entry points

When you don’t need SPA the usage of some entry points can come in handy.

Here is an output:

  • index.js and about.js — bundled entry points.
  • index.html - html document which includes main.js and Index title.
  • about.html - html document which includes about.js and About title.

Webpack dev server

Use webpack-dev-server for local development because it provides:

  • Running in memory
  • Livereload
  • Hot Module Replacement(preferably with React)

Change webpack to webpack-dev-server in npm script start command.

Project is running at http://localhost:8080/

Loaders

Webpack enables use of loaders to preprocess files. Consider an example with addition of SASS loaders.

Installing SASS compiler and loaders.

test — regular expression for which matching we process files.

exclude — a regular expression in which we specify paths that we do not need to search for files.

use — the array of loaders which will be applied to matched files, they are running in the reverse order.

  • sass-loader — SASS compiler.
  • css-loader — interprets @import and url() like import/require() and will resolve them.
  • style-loader — inserts CSS in <script> tag.

Import styles to entry point:

And run webpack:

Then compiled css will be included in <script> tag in index.html

Third-party libraries

We need to add loader for this in our config:

Import library to entry point:

file-loader

Instructs webpack to emit the required object as file and to return its public URL.

Plugins

They are used to change the configuration of the bundler, optimize, add some objects to the modules.

Consider a couple of the most popular plugins.

ExtractTextWebpackPlugin

Extract text from a bundle, or bundles, into a separate file.

Styles will be included via main.css file.

UglifyjsWebpackPlugin

This plugin allows you to minify your JavaScript.

With this module minified JS will be included in index.html

Babel

Babel is a JavaScript compiler which allows you to use the latest features of ECMAScript before the release of the specification, and also use custom and experimental features.

Further we will specify that babel-loader should be applied for js and jsx files.

Into .babelrc we will specify the presets.

Production & Development

Your application will have different configurations for different environments. There are two typical ways to solve this problem:

  • Conditions by NODE_ENV variable.
  • Separate configs.

The first approach is optimal only for applications that do not require a large list of configurations.

For example, you can write conditions using NODE_ENV

If this is a Rich-Client application this config can grow this way to hundreds lines of code that will make it unmaintainable. Therefore, it is better to divide into different configs and just import common options as module. It possible with --config option.

To connect some configs into one you can use webpack-merge.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store