Webpack 2 Deep Dive

Webpack 2 Deep Dive Exercise: ES6ify

Topics:
Kent C. Dodds
Kent C. Dodds
Professional Trainer

This course has been updated! We now recommend you take the Webpack 4 Fundamentals course.

Check out a free preview of the full Webpack 2 Deep Dive course:
The "Exercise: ES6ify" Lesson is part of the full, Webpack 2 Deep Dive course featured in this preview video. Here's what you'd learn in this lesson:

Kent briefly walks through the ES6ify exercise which includes exporting a default View object from the view.js module and using import statements instead of require statement. Import statements allow developers to specify the exact object(s) they wish to import from a module rather than requiring the entire module. The code for this exercise is on the FEM/03.0-es6ify branch.

Get Unlimited Access Now

Transcript from the "Exercise: ES6ify" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Kent C Dodds: Like I said, we're gonna skip over the ES6 stuff. I'll just show you briefly that one just changes require statements, import statements. Now we can have import specifiers to pull out exactly what we want. This looks like that destructuring feature that I was telling you about. It is not.

[00:00:22] It is not destructuring. You think that it is and then you cry when you find out it's not. I made a big, big mistake for a long time thinking that was that. Well, I knew it wasn't destructuring but I thought it worked like destructuring, and it doesn't. And so, if you wanna learn more about that, check out the video I mentioned.

[00:00:42] But yeah, that's pretty much all this one's doing. If you want to do this in your spare time later, then that is cool. But we're gonna skip over that cuz it's not pertinent to web packing necessarily. One part about that that is important, is that for this Tree Shaking thing to work that I'm about to show you, your modules do you have to be ES6.

[00:01:03] This doesn't work with require JS, it doesn't work with the CommonJS, and it doesn't work with AMD, or asynchronous model definition. If you're not familiar with that, don't worry about it. It's dying and nobody really uses that anymore. So yeah, you do have to use ES6.