1. 2
    Webpack Loaders, Source Maps, and ES6
    5m 3s

Webpack Loaders, Source Maps, and ES6

InstructorKent C. Dodds

Share this video with your friends

Send Tweet

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.

Aaron
~ 9 years ago

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

Kent C. Doddsinstructor
~ 9 years ago

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

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. 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
~ 9 years ago

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

~ 9 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. Doddsinstructor
~ 9 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
~ 8 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. Doddsinstructor
~ 8 years ago

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