1. 8
    Configure webpack to Load JavaScript Files through Babel with babel-loader
    2m 17s

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

Andy Van Slaars
InstructorAndy Van Slaars

Share this video with your friends

Send Tweet
Published 4 years ago
Updated 3 years ago

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.

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.

Victor Villacis
Victor Villacis
~ a week ago

My output file does have a string using the .concact method. However, the arrow function and const still there. Where there any updates done to the packages, that the expected output is now different. This is my output.

(()=>{"use strict";const o="Hello, ".concat(phrase,"!");console.log(o("World"))})();

The only time my code matches yours is when I add target: ["web", "es5"] to the webpack.config.js file and even then the output is !function(){"use strict";var o="Hello, ".concat(phrase,"!");console.log(o("World"))}();