webpack v1 from Kent
Webpack Loaders, Source Maps, and ES6
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.