module Webpacker::Helper
def asset_pack_path(name, **options)
# When extract_css is true in webpacker.yml or the file is not a css:
<%= asset_pack_path 'calendar.css' %> # => nil
# When extract_css is false in webpacker.yml and the file is a css:
Example:
This will use asset_path internally, so most of their behaviors will be the same.
Return relative path using manifest.json and passes it to asset_path helper.
Computes the relative path for a given Webpacker asset.
def asset_pack_path(name, **options) if current_webpacker_instance.config.extract_css? || !stylesheet?(name) asset_path(current_webpacker_instance.manifest.lookup!(name), **options) end end
def asset_pack_url(name, **options)
# When extract_css is true in webpacker.yml or the file is not a css:
<%= asset_pack_url 'calendar.css' %> # => nil
# When extract_css is false in webpacker.yml and the file is a css:
Example:
This will use asset_url internally, so most of their behaviors will be the same.
Return absolute path using manifest.json and passes it to asset_url helper.
Computes the absolute path for a given Webpacker asset.
def asset_pack_url(name, **options) if current_webpacker_instance.config.extract_css? || !stylesheet?(name) asset_url(current_webpacker_instance.manifest.lookup!(name), **options) end end
def current_webpacker_instance
Could be overridden to use multiple Webpacker
Returns current Webpacker instance.
def current_webpacker_instance Webpacker.instance end
def image_pack_tag(name, **options)

<%= image_pack_tag 'application.png', size: '16x10', alt: 'Edit Entry' %>
Example:
Creates a image tag that references the named pack file.
def image_pack_tag(name, **options) image_tag(resolve_path_to_image(name), **options) end
def javascript_pack_tag(*names, **options)
<%= javascript_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
Example:
app/javascript/packs/*.js. In production mode, the digested reference is automatically looked up.
in config/webpack/shared.js. By default, this list is auto-generated to match everything in
Creates a script tag that references the named pack file, as compiled by webpack per the entries list
def javascript_pack_tag(*names, **options) javascript_include_tag(*sources_from_manifest_entries(names, type: :javascript), **options) end
def javascript_packs_with_chunks_tag(*names, **options)
<%= javascript_packs_with_chunks_tag 'calendar' %>
DON'T:
<%= javascript_packs_with_chunks_tag 'calendar', 'map' %>
DO:
<%= javascript_packs_with_chunks_tag 'calendar', 'map', 'data-turbolinks-track': 'reload' %> # =>
Example:
See: https://webpack.js.org/plugins/split-chunks-plugin/
app/javascript/packs/*.js and all the dependent chunks. In production mode, the digested reference is automatically looked up.
By default, this list is auto-generated to match everything in
as compiled by webpack per the entries list in config/webpack/shared.js.
Creates script tags that references the js chunks from entrypoints when using split chunks API,
def javascript_packs_with_chunks_tag(*names, **options) javascript_include_tag(*sources_from_manifest_entrypoints(names, type: :javascript), **options) end
def resolve_path_to_image(name)
def resolve_path_to_image(name) path = name.starts_with?("media/images/") ? name : "media/images/#{name}" asset_path(current_webpacker_instance.manifest.lookup!(path)) rescue asset_path(current_webpacker_instance.manifest.lookup!(name)) end
def sources_from_manifest_entries(names, type:)
def sources_from_manifest_entries(names, type:) names.map { |name| current_webpacker_instance.manifest.lookup!(name, type: type) }.flatten end
def sources_from_manifest_entrypoints(names, type:)
def sources_from_manifest_entrypoints(names, type:) names.map { |name| current_webpacker_instance.manifest.lookup_pack_with_chunks!(name, type: type) }.flatten.uniq end
def stylesheet?(name)
def stylesheet?(name) File.extname(name) == ".css" end
def stylesheet_pack_tag(*names, **options)
<%= stylesheet_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
# When extract_css is true in webpacker.yml:
nil
<%= stylesheet_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
# When extract_css is false in webpacker.yml:
Examples:
In that setup you need to configure your styles to be inlined in your JavaScript for hot reloading.
Note: If the development server is running and hot module replacement is active, this will return nothing.
app/javascript/packs/*.js. In production mode, the digested reference is automatically looked up.
in config/webpack/shared.js. By default, this list is auto-generated to match everything in
Creates a link tag that references the named pack file, as compiled by webpack per the entries list
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
def stylesheet_packs_with_chunks_tag(*names, **options)
<%= stylesheet_packs_with_chunks_tag 'calendar' %>
DON'T:
<%= stylesheet_packs_with_chunks_tag 'calendar', 'map' %>
DO:
<%= stylesheet_packs_with_chunks_tag 'calendar', 'map' %> # =>
Example:
See: https://webpack.js.org/plugins/split-chunks-plugin/
app/javascript/packs/*.js and all the dependent chunks. In production mode, the digested reference is automatically looked up.
By default, this list is auto-generated to match everything in
as compiled by webpack per the entries list in config/webpack/shared.js.
Creates link tags that references the css chunks from entrypoints when using split chunks API,
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