The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Webpack Loaders, Source Maps, and ES6

Webpack Loaders, Source Maps, and ES6

5:03
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.
Watch this lesson now
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
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?