Buy
Buy

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

RepLogApp uses the ES6 class syntax. And, at the end of the last tutorial, we used a tool called Babel to transpile this new ES6 code to older code that will run on older browsers. But... we lost that when we moved to Webpack. Yep, if you look at the dumped rep_log.js file and search for class RepLogApp, there it is! Still using the ES6 class syntax.

Installing babel-loader

It's time to bring Babel back. How? Well, we still have the .babelrc file from the last tutorial, which configures Babel to do the transpiling we want:

4 lines .babelrc
{
"presets": ["env"]
}

So if we could somehow tell Webpack to pass all .js files through Babel... we'd be done!

How do we do this? How can we tell Webpack to filter our code through something external? With a very powerful system in Webpack called loaders. Google for "babel-loader" and find its GitHub page. Let's get this guy installed. Copy the yarn add line, though we already have webpack installed.

Find your terminal and run it with --dev on the end:

yarn add babel-loader babel-core babel-preset-env --dev

This installs Babel itself and the env preset: both things we installed in the last tutorial. It also installed babel-loader.

About Loaders

Here's how the loader system works. In Webpack, you can say:

Yo, Webpack! When I require this file, I want you to send it through this loader so that it can make whatever changes it wants.

In this case, we want to send RepLogApp through babel-loader. How? Of course, there are two ways.

The Inline Loader Sytnax

The first is a special syntax right when you require the module. Before the name of the module, add babel-loader!:

... line 1
const RepLogApp = require('babel-loader!./Components/RepLogApp');
... lines 3 - 8

Read this from right to left. It says: require this module and then pass it through babel-loader. You can even have multiple loaders, each separated by an exclamation mark, processing from right to left. Each loader can even accept options via query parameters when using this syntax.

Let's try it! Refresh! Yes.... nothing is broken. And in the built rep_log.js file, search for RepLogApp. The class key is gone! Replaced by fancy code that mimics its behavior.

Babel is back!

Using a Loader Globally

This is great! Except that I do not want to have to add this to every require statement! Thankfully, Webpack also has a global way to apply loaders.

Remove the inline loader syntax:

... line 1
const RepLogApp = require('./Components/RepLogApp');
... lines 3 - 8

And open webpack.config.js. Add a new module key set to {} and a sub-key called rules set to an array:

... lines 1 - 3
module.exports = {
... lines 5 - 13
module: {
rules: [
... lines 16 - 21
]
},
... lines 24 - 29
};

Here's the deal: each rule will contain a filename regular expression and a loader that should be applied whenever a file matches that. Add {} for this first loader with a test key. We want to apply the loader to all files that end in .js:

... lines 1 - 3
module.exports = {
... lines 5 - 13
module: {
rules: [
{
test: /\.js$/,
... lines 18 - 20
}
]
},
... lines 24 - 29
};

That's what this regular expression matches. Below this, add use, with loader: 'babel-loader':

... lines 1 - 3
module.exports = {
... lines 5 - 13
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader'
}
}
]
},
... lines 24 - 29
};

That is it! Now, every .js file will go through Babel! Woohoo!

Restart the webpack script:

./node_modules/.bin/webpack --watch

And check out the built rep_log.js file. Try to find RepLogApp again. Yep, the same, beautiful, transpiled code.

Leave a comment!

  • 2018-11-08 weaverryan

    Hi Galen Senogles!

    Ah! I'm really sorry about this! When we add notes to the script or PDF, we then also add them to the video - but that process is sometimes delayed. That's what happened in this case - the note has not yet been added to the video. My apologies - that's really annoying!

    Anyways, thanks for posting your notes! The Webpack world moves quickly!

    Cheers!

  • 2018-11-06 Galen Senogles

    I see in the included pdf the tip:
    "This tutorial uses Webpack v3, so please double check that you do too, otherwise, you will run into some
    troubles in further chapters"

    Unfortunately I installed the wrong version of webpack going through the tutorial and made a big mess of it. If you're like me and see:

    ERROR in ./web/assets/js/Components/RepLogApp.js (./node_modules/babel-loader/lib!./web/assets/js/Components/RepLogApp.js)
    Module build failed (from ./node_modules/babel-loader/lib/index.js):
    Error: Cannot find module '@babel/core'
    babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.

    Than that is probably your issue.

    From the page: https://webpack.js.org/load...
    Install
    webpack 4.x | babel-loader 8.x | babel 7.x
    npm install -D babel-loader @babel/core @babel/preset-env webpack

    webpack 4.x | babel-loader 7.x | babel 6.x
    npm install -D babel-loader@7 babel-core babel-preset-env webpack

    Webpack 3 is not mentioned there. So I installed webpack 4 and was able to use the second command but with yarn and everything appears to be working so far.