Webpack 101

Now that we know how to bundle our files, lets take a look at the transpiling side of things When it comes to transpiling, webpack has two main concepts that you have to know: loaders and plugins. We will talk about plugins in the next page.

Loaders

Loaders allow you to preprocess ANY file type and output something else in turn. There are many loaders out there and you can even write one yourself if you want, it's not that hard. The loader that we are going to look at now is called babel-loader. This is a popular loader, because it is able to transpile bleeding-edge JavaScript to any ECMAScript Standard that you like, such that you are compatible across all browsers, even those from the late 2000s.

We add the babel-loader in our webpack-config like so:

    const path = require('path');
    module.exports = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.js$/,
                include: path.resolve('./'),
                loader: 'babel-loader',
                options: {
                    presets: ['babel-preset-env']
                }
            }
        ]
    }
    }