Webpack is taking the task automation market by a storm. I have been using it for months now and for most of my needs Webpack took over Grunt and Gulp.
Webpack is a module bundler, it takes modules with dependencies and generates static assets representing those modules.
This post will only focus about Webpack “loaders” and “post loaders”.
Webpack Loaders
Loaders are pieces of code that can be injected in the middle of the compilation stream. Post loaders are called at the end of the stream.
webpack can only process JavaScript natively, but loaders are used to transform other resources into JavaScript. By doing so, every resource forms a module.
Source available on Github
Prerequisite
You will need to have Node and Npm installed on your machine to go through the following examples.
Install
npm install webpack --save-devNow create a webpack.config.js file and dump this basic scaffolding in it:
var webpack = require('webpack'),
path = require('path');
module.exports = {
debug: true,
entry: {
main: './index.js'
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
module: {
loaders: []
}
};
You main entry point is now index.js at the root of your folder. The compiled file will be dumped in the dist folder when compiling.
Compile
When your entry point is defined you can start the compilation using the CLI:
# Debug mode
webpack
# Production mode (minified version)
webpack -pECMAScript 6 compilation
ECMAScript 6 introduce tones of new features (Arrows, Classes, Generators, Modules etc.) that can be used right now! To do so I recommend using Babeljs.
Installation:
npm install babel-loader --save-devAdd the loader to the Webpack configuration:
loaders: [{
test: /\.es6.js$/,
loader: "babel-loader"
}]
You now can require any ES6 modules using require('./src/index.es6.js');
Result
Before
// Generators
var fibonacci = {
[Symbol.iterator]: function*() {
var pre = 0,
cur = 1;
for (;;) {
var temp = pre;
pre = cur;
cur += temp;
yield cur;
}
}
}
module.exports = fibonacci;
After
"use strict";
var fibonacci = function() {
var a = {};
a[Symbol.iterator] = regeneratorRuntime.mark(function b() {
var a, c, d;
return regeneratorRuntime.wrap(function e(b) {
while (1) switch (b.prev = b.next) {
case 0:
a = 0, c = 1;
case 1:
d = a;
a = c;
c += d;
b.next = 6;
return c;
case 6:
b.next = 1;
break;
case 8:
case "end":
return b.stop();
}
}, b, this);
});
return a;
}();
module.exports = fibonacci;
CoffeeScript compilation
Coffeescript needs no introduction, it has been popular for a long time now.
Installation:
npm install coffee-loader --save-devAdd the loader to the Webpack configuration:
loaders: [{
test: /\.coffee$/,
loader: "coffee-loader"
}]
You now can require any CoffeeScript modules using require('./src/index.coffee');
Result
Before
module.exports = ->
square = (x) -> x * x
math =
root: Math.sqrt
square: square
cube: (x) -> x * square x
After
module.exports = function() {
var math, square;
square = function(x) {
return x * x;
};
return math = {
root: Math.sqrt,
square: square,
cube: function(x) {
return x * square(x);
}
};
};
Require CSS files
Installation:
npm install css-loader --save-devAdd the loader to the Webpack configuration:
The css-loader will create a style tag that will be injected into your page on run time. The css-loader also takes care of minification when called in the production mode (-p) e.g webpack -p
loaders: [{
test: /\.css$/,
loader: "css-loader"
}]
You now can require any CSS file using require('./src/index.css');
Autoprefix CSS files
Installation:
npm install autoprefixer-loader --save-devAdd the loader to the Webpack configuration:
What’s really annoying with CSS is that some properties are not implemented the same way by browsers. That’s the reason behind prefixes -ms- for IE, -moz- for Firefox and -webkit- for Chrome, Opera and Safari. The autoprefixer loader allow you to use the standards CSS properties without having to care for browser compatibility.
loaders: [{
test: /\.css$/,
loader: "css-loader!autoprefixer-loader"
}]
You now can require any CSS file using require('./src/index.css');
Result
Before
body {
display: flex;
}After
body {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}Sass compilation
Sass lets you use features that don’t exist in CSS yet like variables, nesting, mixins, inheritance etc. the code created using sass is less complex and therefore easier for developers to maintain than standard CSS.
Installation:
npm install css-loader sass-loader --save-devAdd the loader to the Webpack configuration:
Here we use two loaders at the same time. The first one the sass-loader (read from right to left) will compile Sass into CSS then the css-loader will create a style tag that will be injected into your page on run time.
loaders: [{
test: /\.scss$/,
loader: "css-loader!sass-loader"
}]
You now can require any Sass file using require('./src/index.scss');
Result
Before
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}After
body {
font: 100% Helvetica, sans-serif;
color: #333;
}Less compilation
Less is a CSS pre-processor similar to Sass.
Installation:
npm install css-loader less-loader --save-devAdd the loader to the Webpack configuration:
Here we use two loaders at the same time. The first one the less-loader (read from right to left) will compile Less into CSS then the css-loader will create a style tag that will be injected into your page on run time.
loaders: [{
test: /\.less$/,
loader: "css-loader!less-loader"
}]
You now can require any Sass file using require('./src/index.less');
Result
Before
@font-stack: Helvetica, sans-serif;
@primary-color: #333;
body {
font: 100% @font-stack;
color: @primary-color;
}After
body {
font: 100% Helvetica, sans-serif;
color: #333;
}Move files
You can move any type of file around by using the file-loader.
Installation:
npm install file-loader --save-devAdd the loader to the Webpack configuration:
For the example let’s try to move images from their directory to a brand new image folder with a naming convention of img-[hash].[ext].
loaders: [{
test: /\.(png|jpg|gif)$/,
loader: "file-loader?name=img/img-[hash:6].[ext]"
}]
You now can require any image file using require('./src/image_big.jpg');
Result
the image ./src/img.jpg will be copy and renamed as such: dist/img/img-a4bd04.jpg
Encode files
Sometimes you do not want to make HTTP requests to get assets. For example, what’s the point making HTTP requests to get tiny images when you can directly access them encoded (base64) ? The url-loader does just that. What you need to do is to determine the limit (in bytes) under which you want the encoded version of the file (if the file is bigger you will get the path to it).
Installation:
npm install url-loader --save-devAdd the loader to the Webpack configuration:
When images are under 5kb we want to get a base64 of them and when they are greater than 5kb we want to get the path to them (exactly as with the file-loader).
loaders: [{
test: /\.(png|jpg|gif)$/,
loader: "url-loader?limit=5000&name=img/img-[hash:6].[ext]"
}]
Result
Before
var imgBig = '<img src="' + require("./src/image_big.jpg") + '" />';
var imgSmall = '<img src="' + require("./src/image_small.png") + '" />';
After
var imgBig = '<img src="img/img-a4bd04.jpg" />';
var imgSmall = '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA" />';
Require HTML files
The html-loader turn any html file into a module and require any image dependency along the way!
Installation:
npm install html-loader --save-devAdd the loader to the Webpack configuration:
loaders: [{
test: /\.html$/,
loader: "html-loader"
}]
You now can require any HTML files using require('./src/index.html');. All images will also be treated as dependencies and therefore go through their specific stream of events (see Encode files).
Result
Before
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<img src="./image_small.png">
</body>
</html>After
module.exports = '<html>\n
<head>
\n
<title></title>
\n
<meta charset="UTF-8">
\n
<meta name="viewport" content="width=device-width">
\n
</head>
\n
<body><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA"></body>
\n
</html>';
Expose any module
The expose-loader loader allow you to bind any module to the global scope.
Installation:
npm install expose-loader --save-devAdd the loader to the Webpack configuration:
In this example we want lodash (Underscore.js decorator) to be exposed in the global scope as _.
loaders: [{
test: require.resolve("lodash"),
loader: 'expose?_'
}]
Now when requiring lodash (require('lodash');) will also expose it globally. It is necessary for popular modules such as angularJs, jQuery, underscore, moment or hammerjs.