Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Configure webpack to Load JavaScript Files through Babel with babel-loader

    Andy Van SlaarsAndy Van Slaars
    babelBabel
    webpackwebpack

    In this lesson, we'll configure webpack to use the Babel loader for our JavaScript files, allowing us to transpile our source files and generate a bundle for deploying our application.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 This project has both Babel and webpack, so we have the ability to bundle our JavaScript. We have the ability to compile our JavaScript from modern JavaScript into JavaScript that'll run in down level browsers.

    00:11 Right now, they aren't configured to work together. If we bundle our code, it's going to output those modern JavaScript features. We're going to install a new dependency as a dev dependency. We'll use npm i -d, and we're going to install babel-loader. We'll see that that gets added as a dev dependency in our packaged JSON.

    00:34 We can close that. Then in our webpack config, we have the ability to configure loaders to pass our source code through before it ultimately gets bundled for distribution. In the webpack config, I'm going to add a new key called module. Module's going to take an object. In that object, we're going to have a rules key.

    00:54 Rules is going to be an array. Each item in this array can be an object. The first key we're going to pass to rules is going to be test. This is going to decide which modules this rule applies to. I'll pass a regular expression.

    01:09 This is going to be for anything that ends in .js. This will transform our JavaScript files. Then, we're going to define the loader itself. This is going to be babel-loader, which is what we just installed. Then, we're going to specify that we should exclude note modules.

    01:30 Then, we can pass options into the loader itself. We'll have an options key, and this will be an object. We're going to give this presets. Presets will be an array. The only preset we have now is the babel/preset-env.

    01:46 With our loader configured, let's save that. Then in the terminal, I'm going to do npm run build. If we look at our app bundle and if we jump to the end, we'll see that instead of string interpolation, we have a string using the concat method. Instead of an arrow function like we do in our source, we have a function expression being assigned to a variable, not a constant.

    02:11 Webpack has used the babel-loader to transform our code before creating our output bundle.

    Discuss

    Discuss