Webpacker — Ruby on Rails Guides

上記の公式ドキュメントを読み、webpackerにキャッチアップした。

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

app/javascript:
  ├── 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.