Our introduction to Webpack was slightly technical, and low level. Now it’s time to move into a different lane and approach it more architecturally. It’s great to have discussions like this because before building, understanding concepts at a high level allows us to build things correctly. With that in mind, we’re now going to tilt our heads towards environment setups in Webpack.

What Are Enviorments

The modern development workflow can be broken down as such:

  • Build on local
  • Deploy to dev to debug/view outside your machine
  • Promote to staging for final approval
  • Finally production for end-users to use

This is the most common, and tactful, approach in the building stages by incorporating various steps to validate before the final release. Each one of these steps is a different environment. More verbosely, environments in Webpack are different spaces where the application will be living with a specific purpose.

How Enviornments Differ

While every environment runs the same application, the finer details will be very much different. Let’s look at dev and local as an example. For most setups, they both serve similar purposes. Neither is meant to be anywhere near a final build that is consumed by end-users and is primarily viewed in the development stages. Where they begin to contrast is in the phases of development they are primary in. Let me further explain.

Local development is meant for quick iterations and immediate feedback. This is why development cycle aspects like hot module reloading is great here because it provides an immediate rerendering of files that have changed. In a dev environment, files are built similarly to that in local, not minified or uglified. This allows for debugging still, which is why it is important. Giving us the ability to develop and verify what we’re building before promoting our code to a validation/pre-production stage.

Again, different environments provide more purposeful building and verification.

In Closing

Environments in Webpack aren’t really that difficult to understand. At the same time, it’s kinda funny, some of the most powerful concepts aren’t that difficult to put into practice. At that point, the conversation becomes less about complexity and more about implementation. Having your environments set up properly, knowing how they relate to each other, and understanding the proper promotion cycle is all it takes.