Webpack 4 Fundamentals

Configuring Webpack

Sean Larkin

Sean Larkin

Webpack 4 Fundamentals

Check out a free preview of the full Webpack 4 Fundamentals course

The "Configuring Webpack" Lesson is part of the full, Webpack 4 Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

Sean illustrates the three ways to use Webpack: Webpack config, Webpack CLI, and Node API.


Transcript from the "Configuring Webpack" Lesson

>> Sean Larkin: There's three ways that you can use Webpack. I know you've probably heard of the config, the config. What's unique about it is that like most tools that are, you use through your JavaScript apps in your friend and applications, they're all written in node js, and so Webpack config is just a common JS module right?

You see the module.exports? It's just an object that has a bunch of properties that just describes the Webpack. What should I be doing with this code? And the we have a CLI, basically you could if you wanted to. Almost every single property is bound to CLI arguments and parameters, so you can use it in this way without even touching a config.

And especially now with Webpack 4, the mode property, and not even needing a config out of the box, it's considerably easier. And then we have a Node API. So have you ever wanted to make your own Webpack wrapper? There's lots of things like Neutrino and joy, and there's a whole bunch that are out there, but they leverage the Webpack node API, basically doing the exact same thing.

The caveat is that you basically have to bring your own stats, feedback, and reporter, and console information. All of that doesn't happen out of the box.
>> Sean Larkin: So do you have any questions so far about the ecosystem, about kind of the evolution? Does it maybe frame things a little better?

Why are we using bundlers today? Why are they still considered the canonical standard for building web applications? And hopefully that kind of puts more context. Really when you think about where we came from to why we're trying to do these things are all about performance and being able to scale it, but also being able to maintain it.

And having this module system, especially ESM, has really transformed the opportunities that are possible with bundlers. And there is no other syntax that is as unique as the ES module spec, so much so that it is now being adopted by other programming languages. C++ has RFCs right now to consider adopting this module syntax, because it's so profound and so powerful for stack analysis.

You think back to, I worked on objective C, so I think of, you gotta include a bunch of headers and you just include crap. And you don't care, like how much it costs you, but we don't have that luxury in the web, right? We have to care how much code we're compiling and shipping.

And so even the WebAssembly specification is now modeled exactly, almost identically in the same way from the ES Module specification. So, I don't know why Rust decided to do their own thing, but I love Rust and they have a weird extern thing. I'm hoping that they change that in the future.

Let's hope so.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now