Webpack 2 Deep Dive Development vs Production Environments

Topics:

Build Tools

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 "Development vs Production Environments" 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:

Since the Webpack config file is a JavaScript file, it can contain conditional logic to run code based on the environment. Kent demonstrates how to pass an env variable into the module to determine if the application is running in development or production. This allows him to alter the way the source maps are generated for each environment.

Get Unlimited Access Now

Transcript from the "Development vs Production Environments" Lesson

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

[00:00:04]
>> Kent: I mention that we want to be able to distinguish between production and development in our configuration here when we're generating our configuration. And that's why we're using a function rather than an object is because we can actually accept a parameter here, we're gonna call it env. And in our package.json, we can set, in these scripts, we can set that env object to have a couple properties, so we'll say env.prod.

[00:00:36] And with the way that webpack is using a package called yargs, which has a pirate logo which is kind of fun, yargs. But yeah, by doing this with yargs, it will take that env object and create a property on it called prod, which is set to true. And so alternatively, we can say env.dev for our dev server and env.dev for our dev build.

[00:01:08] And so then, inside of our webpack config, we can say env.prod, and we'll just do a ternary operator here. Oops.
>> Kent: So there's a way to clean this up so it looks a little bit nicer if you're afraid of ternaries, like I am. But yeah, that's basically, that's the process to distinguish between the two.

[00:01:35] So I'll let you go ahead and implement that and you can check out your source maps in dev and prod yourself.
>> Kent: Any questions or anything, feel free to ask.
>> Speaker 2: There was a couple of just, they talked about it in chat. But do you recommend to start using webpack 2 now on production?

[00:02:03]
>> Kent: So webpack 2 is, yeah, it's technically in beta. I would say that it's totally safe to use now. There are a couple of bugs and lots of the hesitancy to officially release it is cuz the docs aren't at all ready. But at the same time, webpack 2 and webpack 1 are really similar.

[00:02:24] So far, what we're looking at here, the only difference is that this is a function that returns a webpack config. And I'm pretty sure they're gonna backport that to webpack 1 anyway. But yeah, everything else that we're looking at right here works with both webpack 1 and 2.

[00:02:41] So there's not a whole lot far as API changes. And as far as functionality, I haven't had any trouble, so.