By admin/development, javascript, react.js/September 01, 2015

INTRODUCTION TO WEBPACK

Webpack is a module bundler. Webpack takes modules with dependencies and generates static assets representing those modules.

Why Webpack?

With webpack you can easily split your application into multiple files/chunks.

This way, your codebase can be split into multiple chunks and those chunks can be loaded on demand reducing the initial loading time of your application.

Caching

Webpack can also make your chunks cache friendly by using hashes.

It can build and bundle CSS, preprocessed CSS, compile-to-JS languages (like CoffeeScript), images and more by utilising webpack loaders.

Another great feature is webpack plugins. Webpack plugins have the ability to inject themselves into the build process to do all sorts of things.

Using Webpack

You can install Webpack through npm:

npm install webpack -g

Add a package.json file to the root of your projects directory with the following npm init command or copy and save the snippet below as your package.json.

{
  "name": "WebpackDemo",
  "author": "Your name",
  "version": "0.0.1",
  "description": "Trying out web pack",
  "private": true,
  "scripts": {},
  "dependencies": {},
  "devDependencies": {}
}

Now we want to add webpack to the newly created package.json file.

npm install webpack --save-dev

to prevent your configuration accidently ending up in Github, you have to make sure the private : true flag is set in your package.json file.

Now the webpack command is available via the CLI. You can find a detailed list of options on the official site or via webpack -h.

Configuaration Options

Option	Description
`webpack`	Building once for development
`webpack -p`	Building once for production (minification)
`webpack --watch`	Continuous incremental build
`webpack -d`	Include source maps
`webpack --colors`	Making things pretty

Creating the Config File

To start we need to create the webpack.config.js in the root of our projects directory.

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

Create a simple JavaScript file called main.js with the following contents:

document.write("Hello Webpack!");

Now by running the webpack command via the CLI you should have a bundle.js file available. What happened is the webpack command found your webpack.config.js file and worked its magic.

To make sure everything is working as expected, we can create a simple index.html file with the following content:

<html>
  <head>
    <script type="text/javascript" src="bundle.js"></script>
  </head>
  <body>
    <h1>Webpack Intro</h1>
  </body>
</html>

Adding Multiple Modules

Webpack supports adding multiple modules to your project.

Create a new file called extra.js with the following contents:

module.exports = document.write('Another file');

Now make a reference to that file in your main.js file:

require('./extra.js');

Run the webpack command from the CLI and open up your bundle.js file. You should now see that both files are happily living together.

Minification

If you want to minify the file, run webpack -p. Now your bundle.js is minified.

Adding loaders

If you want to use ES6 modules in your project, you can use Babel. Babel is a compiler for writing next generation JavaScript.

 npm install babel-loader --save-dev

This will add babel-loader to your package.json file.

Add this new section to your webpack.config.js

module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel?optional[]=runtime&stage=0'
    }
  ]
}

To test the loader we will need to add a simple JavaScript with ES6 file. Lets call it another.js and add the following contents:

let me = 'be';
console.log(`${me} myself!`);

Babel loader is slow!

Make sure you are transforming as few files as possible. Because you are probably matching /.js$/, you might be transforming the node_modules folder or other unwanted source.

Run the webpack command on the CLI and you should now be seeing it in console.

Adding CSS and images

First we will need to add a couple more loaders to our package.json.

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