1. 2
    Webpack Loaders, Source Maps, and ES6
    5m 3s
⚠️ This lesson is retired and might contain outdated information.

Webpack Loaders, Source Maps, and ES6

Kent C. Dodds
InstructorKent C. Dodds
Share this video with your friends

Social Share Links

Send Tweet
Published 9 years ago
Updated 2 years ago

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.

[00:01] 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.

[00:31] 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."

[01:04] 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.

[01:22] 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.

[02:02] 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.

[02:22] 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.

[02:38] 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.

[03:04] 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.

[03:29] 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.

[03:55] 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.

[04:19] 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.

[04:36] 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.

Aaron
Aaron
~ 9 years ago

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

Kent C. Dodds
Kent C. Doddsinstructor
~ 9 years ago

It's here: https://github.com/eggheadio/egghead-webpack-lessons/tree/es6

Dana White
Dana White
~ 9 years ago

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

Kent C. Dodds
Kent C. Doddsinstructor
~ 9 years ago

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.

Dana White
Dana White
~ 9 years ago

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

~ 8 years ago

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?

Kent C. Dodds
Kent C. Doddsinstructor
~ 8 years ago

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.

Jerry
Jerry
~ 7 years ago

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?

Kent C. Dodds
Kent C. Doddsinstructor
~ 7 years ago

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

Markdown supported.
Become a member to join the discussionEnroll Today