Webpack in Developer Mode

Webpack performance

Like the Rails asset pipeline, Webpack converts the files under its domain into JavaScript and CSS that the browser can handle. Unlike the Rails asset pipeline, it uses its own process to monitor the files for changes and recompile them. Webpacker 3.0, that process, webpack-dev-server, runs in line with the Rails development server by default. However, we can separate them if we like. Running webpack-dev-server separately allows the compile to happen when the file changes rather than when we hit the page, which can feel faster. Also, when running standalone, webpack-dev-server can give us a live reload while editing.

The Foreman

We can use a tool called Foreman to run that process alongside our Rails server easily.

First, we’ll add Foreman to the Gemfile:

gem "foreman."

We follow that with a bundle install.

Define process

Then, we’ll define the process in a special file named Procfile: