module Webpacker::Helper

Public Instance Methods

asset_pack_path(name, **options) click to toggle source

Computes the relative path for a given Webpacker asset. Returns the relative path using manifest.json and passes it to path_to_asset helper. This will use path_to_asset internally, so most of their behaviors will be the same.

Example:

# When extract_css is false in webpacker.yml and the file is a css:
<%= asset_pack_path 'calendar.css' %>  # => nil

# When extract_css is true in webpacker.yml or the file is not a css:
<%= asset_pack_path 'calendar.css' %> # => "/packs/calendar-1016838bab065ae1e122.css"
# File lib/webpacker/helper.rb, line 20
def asset_pack_path(name, **options)
  if current_webpacker_instance.config.extract_css? || !stylesheet?(name)
    path_to_asset(current_webpacker_instance.manifest.lookup!(name), options)
  end
end
asset_pack_url(name, **options) click to toggle source

Computes the absolute path for a given Webpacker asset. Returns the absolute path using manifest.json and passes it to url_to_asset helper. This will use url_to_asset internally, so most of their behaviors will be the same.

Example:

# When extract_css is false in webpacker.yml and the file is a css:
<%= asset_pack_url 'calendar.css' %> # => nil

# When extract_css is true in webpacker.yml or the file is not a css:
<%= asset_pack_url 'calendar.css' %> # => "http://example.com/packs/calendar-1016838bab065ae1e122.css"
# File lib/webpacker/helper.rb, line 37
def asset_pack_url(name, **options)
  if current_webpacker_instance.config.extract_css? || !stylesheet?(name)
    url_to_asset(current_webpacker_instance.manifest.lookup!(name), options)
  end
end
current_webpacker_instance() click to toggle source

Returns the current Webpacker instance. Could be overridden to use multiple Webpacker configurations within the same app (e.g. with engines).

# File lib/webpacker/helper.rb, line 5
def current_webpacker_instance
  Webpacker.instance
end
favicon_pack_tag(name, **options) click to toggle source

Creates a link tag for a favicon that references the named pack file.

Example:

<%= favicon_pack_tag 'mb-icon.png', rel: 'apple-touch-icon', type: 'image/png' %>
<link href="/packs/mb-icon-k344a6d59eef8632c9d1.png" rel="apple-touch-icon" type="image/png" />
# File lib/webpacker/helper.rb, line 68
def favicon_pack_tag(name, **options)
  favicon_link_tag(resolve_path_to_image(name), options)
end
image_pack_tag(name, **options) click to toggle source

Creates an image tag that references the named pack file.

Example:

<%= image_pack_tag 'application.png', size: '16x10', alt: 'Edit Entry' %>
<img alt='Edit Entry' src='/packs/application-k344a6d59eef8632c9d1.png' width='16' height='10' />

<%= image_pack_tag 'picture.png', srcset: { 'picture-2x.png' => '2x' } %>
<img srcset= "/packs/picture-2x-7cca48e6cae66ec07b8e.png 2x" src="/packs/picture-c38deda30895059837cf.png" >
# File lib/webpacker/helper.rb, line 52
def image_pack_tag(name, **options)
  if options[:srcset] && !options[:srcset].is_a?(String)
    options[:srcset] = options[:srcset].map do |src_name, size|
      "#{resolve_path_to_image(src_name)} #{size}"
    end.join(", ")
  end

  image_tag(resolve_path_to_image(name), options)
end
javascript_pack_tag(*names, **options) click to toggle source

Creates a script tag that references the named pack file, as compiled by webpack per the entries list in package/environments/base.js. By default, this list is auto-generated to match everything in app/javascript/packs/*.js. In production mode, the digested reference is automatically looked up.

Example:

<%= javascript_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
<script src="/packs/calendar-1016838bab065ae1e314.js" data-turbolinks-track="reload"></script>
# File lib/webpacker/helper.rb, line 80
def javascript_pack_tag(*names, **options)
  javascript_include_tag(*sources_from_manifest_entries(names, type: :javascript), **options)
end
javascript_packs_with_chunks_tag(*names, **options) click to toggle source

Creates script tags that reference the js chunks from entrypoints when using split chunks API, as compiled by webpack per the entries list in package/environments/base.js. By default, this list is auto-generated to match everything in app/javascript/packs/*.js and all the dependent chunks. In production mode, the digested reference is automatically looked up. See: webpack.js.org/plugins/split-chunks-plugin/

Example:

<%= javascript_packs_with_chunks_tag 'calendar', 'map', 'data-turbolinks-track': 'reload' %> # =>
<script src="/packs/vendor-16838bab065ae1e314.chunk.js" data-turbolinks-track="reload"></script>
<script src="/packs/calendar~runtime-16838bab065ae1e314.chunk.js" data-turbolinks-track="reload"></script>
<script src="/packs/calendar-1016838bab065ae1e314.chunk.js" data-turbolinks-track="reload"></script>
<script src="/packs/map~runtime-16838bab065ae1e314.chunk.js" data-turbolinks-track="reload"></script>
<script src="/packs/map-16838bab065ae1e314.chunk.js" data-turbolinks-track="reload"></script>

DO:

<%= javascript_packs_with_chunks_tag 'calendar', 'map' %>

DON'T:

<%= javascript_packs_with_chunks_tag 'calendar' %>
<%= javascript_packs_with_chunks_tag 'map' %>
# File lib/webpacker/helper.rb, line 107
def javascript_packs_with_chunks_tag(*names, **options)
  javascript_include_tag(*sources_from_manifest_entrypoints(names, type: :javascript), **options)
end
preload_pack_asset(name, **options) click to toggle source

Creates a link tag, for preloading, that references a given Webpacker asset. In production mode, the digested reference is automatically looked up. See: developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

Example:

<%= preload_pack_asset 'fonts/fa-regular-400.woff2' %> # =>
<link rel="preload" href="/packs/fonts/fa-regular-400-944fb546bd7018b07190a32244f67dc9.woff2" as="font" type="font/woff2" crossorigin="anonymous">
# File lib/webpacker/helper.rb, line 119
def preload_pack_asset(name, **options)
  if self.class.method_defined?(:preload_link_tag)
    preload_link_tag(current_webpacker_instance.manifest.lookup!(name), options)
  else
    raise "You need Rails >= 5.2 to use this tag."
  end
end
stylesheet_pack_tag(*names, **options) click to toggle source

Creates a link tag that references the named pack file, as compiled by webpack per the entries list in package/environments/base.js. By default, this list is auto-generated to match everything in app/javascript/packs/*.js. In production mode, the digested reference is automatically looked up.

Note: If the development server is running and hot module replacement is active, this will return nothing. In that setup you need to configure your styles to be inlined in your JavaScript for hot reloading.

Examples:

# When extract_css is false in webpacker.yml:
<%= stylesheet_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
nil

# When extract_css is true in webpacker.yml:
<%= stylesheet_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
<link rel="stylesheet" media="screen" href="/packs/calendar-1016838bab065ae1e122.css" data-turbolinks-track="reload" />
# File lib/webpacker/helper.rb, line 143
def stylesheet_pack_tag(*names, **options)
  if current_webpacker_instance.config.extract_css?
    stylesheet_link_tag(*sources_from_manifest_entries(names, type: :stylesheet), **options)
  end
end
stylesheet_packs_with_chunks_tag(*names, **options) click to toggle source

Creates link tags that reference the css chunks from entrypoints when using split chunks API, as compiled by webpack per the entries list in package/environments/base.js. By default, this list is auto-generated to match everything in app/javascript/packs/*.js and all the dependent chunks. In production mode, the digested reference is automatically looked up. See: webpack.js.org/plugins/split-chunks-plugin/

Examples:

<%= stylesheet_packs_with_chunks_tag 'calendar', 'map' %> # =>
<link rel="stylesheet" media="screen" href="/packs/3-8c7ce31a.chunk.css" />
<link rel="stylesheet" media="screen" href="/packs/calendar-8c7ce31a.chunk.css" />
<link rel="stylesheet" media="screen" href="/packs/map-8c7ce31a.chunk.css" />

DO:

<%= stylesheet_packs_with_chunks_tag 'calendar', 'map' %>

DON'T:

<%= stylesheet_packs_with_chunks_tag 'calendar' %>
<%= stylesheet_packs_with_chunks_tag 'map' %>
# File lib/webpacker/helper.rb, line 170
def stylesheet_packs_with_chunks_tag(*names, **options)
  if current_webpacker_instance.config.extract_css?
    stylesheet_link_tag(*sources_from_manifest_entrypoints(names, type: :stylesheet), **options)
  end
end

Private Instance Methods

resolve_path_to_image(name) click to toggle source
# File lib/webpacker/helper.rb, line 189
def resolve_path_to_image(name)
  path = name.starts_with?("media/images/") ? name : "media/images/#{name}"
  path_to_asset(current_webpacker_instance.manifest.lookup!(path))
rescue
  path_to_asset(current_webpacker_instance.manifest.lookup!(name))
end
sources_from_manifest_entries(names, type:) click to toggle source
# File lib/webpacker/helper.rb, line 181
def sources_from_manifest_entries(names, type:)
  names.map { |name| current_webpacker_instance.manifest.lookup!(name, type: type) }.flatten
end
sources_from_manifest_entrypoints(names, type:) click to toggle source
# File lib/webpacker/helper.rb, line 185
def sources_from_manifest_entrypoints(names, type:)
  names.map { |name| current_webpacker_instance.manifest.lookup_pack_with_chunks!(name, type: type) }.flatten.uniq
end
stylesheet?(name) click to toggle source
# File lib/webpacker/helper.rb, line 177
def stylesheet?(name)
  File.extname(name) == ".css"
end