This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Webpack Loaders, Source Maps, and ES6

5:03 JavaScript lesson by

Webpack loaders are how you tell webpack to resolve your dependencies and you can use a loader built for the babel transpiler to easily enable ES6 code in your project. Full sourcemap support is also available using webpack's devtool property.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Webpack loaders are how you tell webpack to resolve your dependencies and you can use a loader built for the babel transpiler to easily enable ES6 code in your project. Full sourcemap support is also available using webpack's devtool property.

Avatar
Telepath

Awesome couple of screencasts. I hope you decide to add one about integrating angular with webpack. I've been strating to think about writing angular apps in ES6 but really don't like the options I've seen out there so far, including those using webpack. The flow you're describing here would compel me to make the switch that much sooner.

In reply to egghead.io
Avatar
Kent C.

That's great feedback. I think I will. In the mean time, you could look at this as an example. It's a little rough, but I think it'll give you an idea: https://github.com/kentcdodds/story-starter/blob/master/webpack.config.js

In reply to Telepath
Avatar
Telepath

Awesome, can't wait. And in the meantime, will definitely take a look. Thanks!

In reply to Kent C.
Avatar
Aaron

The Github Source is missing, where can I find a link?

Avatar
Dana

When adding Babel File Watcher in WebStorm, what should I add under 'Program'? Is the file under node modules?

In reply to Kent C.
Avatar
Kent C.

Because you're doing this yourself (with webpack), I would recommend against adding the Babel File Watcher in WebStorm. It doesn't give you any benefit.

In reply to Dana
Avatar
Dana

No worries. I neglected to change the JS version to ES6 :)

In reply to Kent C.
Avatar

I'm having trouble configuring webpack to use ES6 modules like 'export default Foo'. Right now I have to use CommonJS module method 'module.exports = Foo'; Any one knows how to set this up in webpack?

Avatar
Kent C.

Your trouble is likely because a new version of Babel was released. I recommend you install version 5 of Babel and get it working. Then use this guide to find how to upgrade to Babel 6.

In reply to
Avatar
Jerry

Ended up installing babel-loader, babel-preset-es2015 and don't forget babel-core. To get this to work I had to add the following loader test string: {test: /.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015'}.

Now when you make the change to lame-dom-binding: "module.exports" to "export default {" it will throw an undefined unless you do this in index.js: var LameDomBinding = require('./lame-dom-binding').default;

This worked but why?

In reply to Kent C.
Avatar
Kent C.

Thanks for sharing. The reason for this is all here.

In reply to Jerry

To enable ES6 in your WebPACK config, all that you need to do is add a module and loaders property. In this loaders it's an array of objects. These are the loaders for the files that you require into your project. Each one of these load objects has a test property, RegEx, that will be matched against any files. Any files that match this RegEx will be loaded through the loader that you specify.

Here we're going to say anything that ends in JS is going to be loaded through BABEL, which is a loader that we need to install. We'll npm by BABEL loader. We install that loader. We want to exclude node modules because all of the node modules that we'll be using will be in ES5 so we don't need to run it through BABEL. We'll say, "Exclude node modules."

Now that's all that we need to do to enable ES6 stuff in our code, which is way cool. Let's go ahead and take our lame DOM binding. We'll double check and refresh. Everything is working. We'll change from common JS to ES6 module syntax.

We'll say, "Export default." Let's run WebPACK with watch. It's bundled. We refresh. Working way cool. This is really exciting. We'll also take this function and turn it into AeroSyntax and make it a one-liner just because we can. We'll even take this and remove the function keyword all together. Everything is totally still working, so I can still type which is way cool.

One thing that you need to be aware of when doing this is this bundle JS file is pretty big and not very useful. If we wanted to put a debugger in here and we refresh we get a debugger on there, but it's in that huge file.

Something that's really useful is using the DevTool property in here. In here you can say DevTool and specify a string. There are a couple options that you have in here, but a really good one for local development is eval.

WebPACK recommends this for development only. It's very fast to make the initial build, and rebuilds are very fast. If we refresh now you'd see this webpack://. We can see all of our source mapped files. That's what eval is doing. It's actually creating a source map for us.

If we look at the lame DOM binding here, then we can see the generated code as a source map. This isn't actually what I wrote. Remember it's a single line function. I'm not using module exports. If you want to have that, then instead you can say, "Eval source map." Then we'll rerun this.

It takes us a little bit longer to build initially. Then rebuilds are fast. This is also recommended for development only. Now if I refresh and open up my lame DOMbinding.JS you can see it's my code exactly as I coded it which is really neat.

You have that capability. If you're building this for actual production code, then you can use inline source map which is probably not exactly what you're going for. But this does allow for the same kind of stuff. You still get that source map power there.

If you really want this for something that's production, then you'll just use SourceMap. This will add a source map file for you, bundle that JS.map. That file is not actually loaded into the browser until the DevTools are brought up.

That is how you add ES6 to your project using WebPACK. You specify a module with loaders, and your loader tests for the file name that you want to have ES6ified. You give the loader a BABEL. You exclude whatever you want to exclude. That's all that it takes. All of a sudden you can use ES6 in all of your stuff, and it's awesome.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?