Tech

Getting started with webpack

In this post, I will show you how simple it is to combine different module systems with webpack.September 8, 2014· 6 minutes to read

JavaScript has no standardized module system yet (ES6 will bring one, finally). A module system is used to structure your code into files, refer to dependencies and export values. Due to the lack of a standard multiple system have evolved. If you use some different libraries in your project and each of them is using different module systems it´s very hard to combine them easily.
Until now there are several tools e.g. grunt, gulp, browserify and many more.
But one of the upcoming tools is webpack.

In this post, I will show you how simple it is to combine different module systems with webpack.

Module systems webpack understands

The most used module systems are the following:

1. script-tags (without a module system)

<script type="text/javascript" src="src/main.js" charset="utf-8"></script>

2. CommonJS is used by Node.js

//firstScript.js
module.exports = function(){ };

//main.js
require('./firstScript.js');

3. AMD is used by RequireJS

//firstScript.js
define(function (firstScript) { ... });

//main.js
require(['./firstScript'], function (firstScript) {}

4. ECMAScript 6 modules

//firstScript.js
export function hello() { ...}

//main.js
import { hello } from 'firstScript';

Webpack takes modules with dependencies and generates static assets containing those modules.
With webpack it´s possible to load and bundle different dependency files like CSS, JavaScript, CoffeeScript, etc. and use different module styles like AMD and together.

For production you only have to include one bundled file that represents all modules.

Getting Started

The final file structure will look like this:

Webpack demo folder structure

First of all webpack can be installed through npm:

$ npm install webpack -g #to install it globally

Or webpack can also be added as a dependency in your package.json

$ npm install webpack --save

Project Setup AMD

After the installation i created three JavaScript files (src/main.js, src/firstScript.js and src/secondScript.js), that use the AMD module notation:

//secondScript.js
define(function () {
 return {
    color: 'green'
 }
});

//firstScript.js
define(['./secondScript'],function(secondScript){
   console.log('Color from secondScript', secondScript.color);
   return {
      hello: function () {
         console.log('Hello from firstScript');
      }
    }
});

//main.js
define(['./firstScript'], function (firstScript) {
   firstScript.hello();
});

To get the the full code check out the repository on Github:
webpack-amd-demo on GitHub

Project Setup CommonJS

This three files use the CommonJS module notation:

//secondScript.js
module.exports = {
   color: 'green'
};

//firstScript.js
var secondScript = require('./secondScript.js');
console.log('Color from secondScript', secondScript.color);
module.exports = {
   hello: function () {
      console.log('Hello from firstScript');
   }
};

//main.js
var firstScript = require('./firstScript.js');
firstScript.hello();

To get the the full code check out the repository on Github:
webpack-commonJs-demo on GitHub

Project Setup AMD + CommonJS

This three files use the AMD and CommonJS module notations together:

//secondScript.js
module.exports = {
   color: 'green'
};

//firstScript.js
define(['./secondScript'],function(secondScript){
  console.log('Color from secondScript', secondScript.color);
   return {
      hello: function () {
         console.log('Hello from firstScript');
      }
   }
});

//main.js
var firstScript = require('./firstScript.js');
firstScript.hello();

To get the the full code check out the repository on Github:
webpack-amd-commonJs demo on GitHub

Create bundled files

To create a bundled file of all modules with webpack, you have to create a webpack.config.js or use the CLI. To create bundle.js from the files src/main.js, src/firstScript.js and src/secondScript.js you have to switch to the webpack-amd-demo directory and execute the CLI command:

$ webpack src/main.js dist/bundle.js

I recommend to use a webpack.config.js instead of the CLI because you have a good overview of the declarations as the entry, output, etc. and you don´t need to remember all the commands for the CLI.

//webpack.config.js
module.exports = {
   entry: './src/main.js',
   output: {
      filename: './dist/bundle.js'
   }
};

This simple webpack.config.js defines the entry point as main.js in the src directory. The bundled file will be created in the dist directory and is named bundle.js.
This webpack.config.js can be used for all three examples.

To uses webpack.config.js go to the webpack-amd-demo directory and execute:

$ webpack

Now the bundle.js file is created and includes all the files: src/main.js, src/firstScript.js and src/secondScript.js combined in on file.

Attention: If a webpack.config.js is defined and you also run the CLI command, an error will occur.

Include the bundled file

For production you only have to include the bundle.js file in your index.html.

<!doctype html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>webpack-amd-demo</title>
    <script type="text/javascript" src="src/bundle.js" charset="utf-8"></script>
  </head>
  <body>
    <h1>webpack-amd-demo</h1>
  </body>
</html>

Summary

Using webpack makes bundling really easy.
The advantages are:

Using one module system in your app
Include any kind of modules, no matter what their module system styles are
Automating the development cycle by using watchers or the build-in webpack-dev-server
Share source code between Node.js and frontend JavaScript
Less HTTP requests, because all modules are in one bundled file

More webpack features

Webpack offers many more options than just bundling JavaScript files:

Splitting code in custom chunks – Code-splitting
Loaders for different assets (CSS, Images, CoffeeScript, LESS, …) – Loaders
Optimizations to reduce the output size (caching requests by using hashes) – Optimization