Understanding webpack Configuration

Evaluating our webpack is difficult because its behavior depends on its configuration file, and one of the things Rails Webpacker does is generate that configuration file from different inputs. As a result, we can’t see the real webpack configuration in a file.

There’s a partial workaround that will allow us to print out the configuration file, or at least most of it, and it’ll be used to guide our way through the way webpack works, and then we will learn how Webpacker simplifies webpack.

The workaround to let us see our webpack configuration is to go to the file config/webpack/development.js and add the following lines at the end of the script:

Object.defineProperty(RegExp.prototype, "toJSON", {
  value: RegExp.prototype.toString
});

console.log(JSON.stringify(module.exports, null, 2))

At this point, module.exports is an object containing the webpack config as JSON, so we’re simply asking it to print to the console with a two-space indent. A bit of extra code has also been added so that the regular expressions print properly. This won’t get the full-text representation of the webpack config, but it’s as close as we can easily get.

With that code in place, if we run the command bin/webpack, we’ll see the entire webpack configuration in our terminal window.

We’re not going to show the entire thing here in one piece, but we’ll break it down to cover webpack’s main concepts. For each section, we’ll discuss the webpack syntax and what it means, and how Rails Webpacker uses defaults and conventions to generate the configuration.

Mode

All these snippets will be shown one by one, but remember that they are part of the larger configuration file. Also, these snippets may not exactly match the order that our file prints in.

{
  "mode": "development",
  "devtool": "cheap-module-source-map",
}

Unlike Rails, webpack only cares about two modes: development and production

We can set the mode to none, but it is advised not to do that.

This setting sets the NODE_ENV environment variable, and that value might be used within the code to manage features. Setting production is typically used to run some optimization plugins that will not be talked about in detail here.

In Rails, Webpacker sets this variable based on our Rails environment, if we are not in development, we are in production. So, for example, a staging environment gets the production plugins. But Webpacker allows us to maintain separate configuration files based on our Rails environment.

Webpacker allows us to generate, say, a different environment for testing, but the NODE_ENV environment variable in that configuration will still be set to either development or production by the Webpacker config.

The devtool parameter controls the generation of source maps. A source map is a separate file that relates lines in our originally coded file in TypeScript, CoffeeScript, or others with the JavaScript file eventually sent to the browser. With a source map, debugging tools in the browser can ...