ShakaCode | ShakaCode Blog | Rails On Maui Blog | Rails | ReactJs | JavaScript | Webpack | Productivity |

Updating to v4 of rails/webpacker


#1

Many React on Rails installations will be using a custom webpack configuration with extracted CSS.

Upgrading from v3.x to v4 should only require this change:

Add this to your config/webpacker.yml. You can see a full example below.

extractCSS: true

If you don’t do that, you won’t get any CSS tags, like:

<link rel="stylesheet" media="all" href="/webpack/dev/common.bundle.ef415c7c0311e3b88851.css">

Here’s an a full example of a config/webpacker.yml:

# Note: Base output directory of /public is assumed for static files
default: &default
  source_path: client/app
  compile: false
  manifest: manifest.json
  cache_manifest: false
  extract_css: true

development:
  <<: *default
  # generated files for development, in /public/webpack/dev
  public_output_path: webpack/dev

test:
  <<: *default
  # generated files for tests, in /public/webpack/test
  public_output_path: webpack/test

production:
  <<: *default
  # generated files for tests, in /public/webpack/production
  public_output_path: webpack/production
  cache_manifest: true