Introduction to Webpack

Module bundling, Loaders, Plugins, Babel

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.

npm install --save-dev webpack

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:

npm run start

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

No configuration file found and no output filename configured via CLI option. A configuration file could be named ‘webpack.config.js’ in the current directory. Use --help to display the CLI options.

Init configuration file

touch webpack.config.json

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.

npm install --save-dev html-webpack-plugin

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.

mkdir src
touch src/hello.js

Which will be imported and used in our entry point:

touch src/index.js

Let’s build it with webpack.

npm run start

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)

npm install --save-dev webpack-dev-server

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

npm run start

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.

npm install --save-dev node-sass style-loader css-loader sass-loader

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:

import ‘./index.scss’

And run webpack:

npm run build

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

Third-party libraries

npm install normalize.css

We need to add loader for this in our config:

Import library to entry point:

import ‘normalize.css’

file-loader

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

npm install --save-dev file-loader

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.

npm install --save-dev extract-text-webpack-plugin

Styles will be included via main.css file.

UglifyjsWebpackPlugin

This plugin allows you to minify your JavaScript.

npm install --save-dev uglifyjs-webpack-plugin

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.

npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

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.

“scripts”: { 
  “start”: “NODE_ENV=development webpack-dev-server”,
  “build”: “NODE_ENV=production webpack”
}

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.

“scripts”: { 
  “start”: “webpack-dev-server --config webpack.dev.config.js”,
  “build”: “webpack --config webpack.prod.config.js”
}

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