SMERTH

2.1 What is a loader?

Webpack Loaders help us load and preform transformations on files. They can help with the loading of files and images.

Webpack Loaders are commonly used when working with different dialects of JavaScript. For example, many React applications use JSX, or "JavaScript as XML" to create user interface components. JSX doesn't run natively in the browser. It must first be transpiled into plain JavaScript in order for it to run.

You also might be using ES6 or ECMAScript 6, the latest version of the JavaScript spec. Not all browsers support all ES6 features, so like JSX, ES6 is often transpiled into plain JavaScript first.

The tool most commonly used for transformation of JSX and ES6 into ES5 JavaScript is Babel. When we use the babel-loader in webpack projects we tell webpack to use Babel to perform these transformations on certain types of files. JSX and ES6 go in, get transpiled, and plain JavaScript comes out.

For a full list of webpack loaders you can check out the official webpack documentation which provides a multitude of options for loading what you need with webpack.

2.1.0.1 See Webpack Loaders

2.2 Setting up babel-loader for a React or ES6 project

To setup the babel-loader, first install needed dependencies.

Both we will send the "--save-dev" flag, so they'll be saved into our dev dependencies.

npm install babel-loader babel-core --save-dev

Babel-loader is the loader, and babel-core is the actual babel package that handles our transformations.

Edit webpack.config file.

Add a new key called module. Module is an object that is going to take in, as another key "loaders", "loaders" is an array of objects that describe the different loaders that you want to use.

We want to test for, in other words, we want to look for, any files that have a js extension. Use a regular expression to test for js files.

/\.js$/

You can exclude, or include, folders and files so that webpack won't run on specific files and folders.

Exclude anything from the node_modules folder.

And if there are any other things that you wanna exclude, you can add them to this node as well.

Next add a loader, in this case the babel-loader.

    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                loader: 'babel'
            }
        ]
    }

Run webpack. Nothing appears to have happened.

You need to specify what the babel-loader should do.

First give is something to work on:

@ main.js

Change the variable on line 1 to be const. That's ES6 syntax.

const $ = require('jquery');
$('#target').html('Hello Hello World!');

Run webpack again. Look inside of our bundle.js, the const keyword is there but it hasn't been transformed into anything.

You need to specify a preset.

2.3 Using presets

In versions of Babel prior to version 6 all of the transformations were automatic meaning that if you had some ES6 code Babel would transpile that. If there was some react with JSX that would be transpiled too. Now in Babel 6 all of these transpiling features are opt-in, so if I want to transpile anything, you need to specify what to transpile, using presets.

Presets are going to be defined in an object with a key of query.

Query is going to be set equal to an object and this will have a key of presets for an array containing ES2015 and react.

    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }

In addition you need a .babelrc file.

touch .babelrc

So the Babel RC file is just an object that has presets defined for ES2015 and react.

@ .babelrc

{
    'presets': [
        'es2015', 'react'
    ]
}

Install the required packages

@ terminal

npm install babel-preset-es2015 babel-preset-react --save-dev

Run webpack and the const syntax should be transformed to var.

2.4 Setting up coffee-loader for CoffeeScript projects

The same methodology applies to setting up other loaders.

Set up a project using CoffeeScript.

Create main.coffee

mkdir src/coffee && touch src/coffee/main.coffee

main.coffee is going to create a variable for a message that is going to require a different file called message.coffee. And then we console.log message.message.

message = require './message.coffee'
 
console.log message.message

Create message.coffee

touch src/coffee/message.coffee

@ message.coffee

exports.message = "Loading Coffee Script!"

The main file will import the message file.

Install the loader dependancies:

@ terminal

npm install coffee-loader coffee-script --save-dev

Edit webpack.config.js

Change the entry point to use main.coffee.

We can build it to the same location because CoffeeScript is going to go through the process of transiting to JavaScript.

Get rid of the query for babel, and replace our babel-loader with coffee.

Replace our test with a test for coffee files

/\.coffee$/ is a regex that matches the CoffeeScript file extension.

module.exports = {
    entry: './main.coffee',
    output: {
        path: 'build',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.coffee$/,
                exclude: /(node_modules)/,
                loader: 'coffee'
            }
        ]
    }
};

Run wepback, and we should see the bundle being built.

In the browser look in the console for the message that originates in the CoffeeScript file.