Installing Webpack in an existing Ruby On Rails application

After a few hours searching / reading blogs to make the Ruby On Rails project work integrated with the Webpack I decided to document the process.
First at all my project was generated at version 5.0.0, now is using ROR 5.1.4 (last stable) and Ruby 2.5.0.
What I’ll show in this post?

Before start installing Webpack we need to install the requirements (Node.js, Yarn).

Installing Node.js

My machines are running Debian “Strech” (stable), so I’ve need to update Node.js, I installed the newer version of package available on the maintainer’s website

Installing Yarn

Later I installed the Yarn package from maintainer’s website

Installing Webpacker

In Gemfile add Webpacker gem

Update Gems

Now we can install Webpack at project

Running this command will create some files and others will be modified

Configuring the webpack

Note: Before attempting to run the project you will need to create the webpack configuration file, without this file the application will freeze

At project root create a file called webpack.config.js and add that code

Removing the Assets Pipeline

With Webpack providing our new foundation, we can start removing the old asset pipeline.

The Gemfile

Let’s delete some gems used in the past
Comment or delete the following gems from your Gemfile then run bundle

  • coffee-rails
  • jquery-rails
  • sass-rails
  • turbolinks
  • uglifier

These gems are no longer needed, being replaced or deprecated by Webpack and the Javascript libraries we’ll install later

Configuring Environment files

Now we need to tell Rails to ignore assets in both development.rb and production.rb files at config/environments folder ( test.rb will be left untouched)

At config/environments/development.rb

At config/environments/production.rb

Installing Javascript and CSS compilers and transpilers

After removing jquery we ended up getting in trouble, we get stuck with raw CSS and JavaScript.

Babel ECMAScript 5 (ES5)

First, I really tried to program in CoffeScript but I didn’t like it the syntax.
Babel is the library we’ll use to transpile ES6 to pure Javascript. We can install it with the following command:

More about the packages you can read at YarnPkg site:

Configuring Webpack to use Babel

After install the packages we need to configure the webpack to use Babel, we’ll do that by adding the loader do the module section in webpack.config.js file.
Add this

The file must be like this

Webpack: Running first pack

At this point you could test webpack working, add the folling lines to your app/javascript/packs/application.js file and run webpack.

You’ll see it output into pure JavaScript in the public/packs directory

Cool, It’s works
Wait!!!
The project we are working on already exists, with it we have many sources (JavaScript and Stylesheet) in the default assets directory app/assets.
How can I use them?

Webpack: Resolving older assets

Now we’ll configure webpack to read older sources from the previous assets directory, at config/webpacker.yml add this:

Just this? Nooooo

After add 'app/assets' to webpacker.yml each file on app/assets you must import in the new application.js at app/javascripts/packs
The file may be like this

Webpack: Compiling and Transpiling Assets

After each file modification you’ll need to run the webpack in console to compile/transpile assets.
But to automate this process we’ll pass watch parameter to webpack.
When passing this parameter, the webpack will be watching the files for changes

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *