Webpacker — Ruby on Rails Guides


Sprockets vs Webpacker

Task Sprockets Webpacker
Attach JavaScript javascript_include_tag javascript_pack_tag
Attach CSS stylesheet_link_tag stylesheet_pack_tag
Link to an image image_url image_pack_tag
Link to an asset asset_url asset_pack_tag
Require a script //= require import or require

Webpacker Locations

File Location Explanation
Javascript Folder app/javascript A place for your front-end source
Webpacker Configuration config/webpacker.yml Configure the Webpacker gem
Babel Configuration babel.config.js Configuration for the Babel JavaScript Compiler
PostCSS Configuration postcss.config.js Configuration for the PostCSS CSS Post-Processor
Browserlist .browserslistrc Browserlist manages target browsers configuration
  ├── packs:
  │   # only webpack entry files here
  │   └── application.js
  │   └── application.css
  └── src:
  │   └── my_component.js
  └── stylesheets:
  │   └── my_styles.css
  └── images:
      └── logo.svg

Webpacker adds a webpacker:compile task to the assets:precompile rake task, so any existing deploy pipeline that was using assets:precompile should work. The compile task will compile the packs and place them in public/packs.