Define entrypoint¶

Create a file "./assets/index.js" relative to you application directory with the following content:

  console.log('Cool beans!');

Application¶

Your Mojolicious application need to load the Mojolicious::Plugin::Webpack plugin and tell it what kind of assets it should be able to process:

  $app->plugin(Webpack => {process => [qw(js css)]});

See "register" for more configuration options.

Template¶

To include the generated assets in your template, you can use the "asset" helper:

  %= asset "cool_beans.css"
  %= asset "cool_beans.js"

Run the application¶

You can start the application using "daemon", "hypnotoad" or any Mojolicious server you want, but if you want rapid development you should use "mojo webpack", which is an alternative to "morbo":

  $ mojo webpack -h
  $ mojo webpack ./script/myapp.pl

However if you want to use another daemon and force "webpack" to run, you need to set the "MOJO_WEBPACK_BUILD" environment variable to "1". Example:

  MOJO_WEBPACK_BUILD=1 ./script/myapp.pl daemon

Testing¶

If you want to make sure you have built all the assets, you can make a test file like "build-assets.t":

  use Test::More;
  use Test::Mojo;
  # Run with TEST_BUILD_ASSETS=1 prove -vl t/build-assets.t
  plan skip_all => "TEST_BUILD_ASSETS=1" unless $ENV{TEST_BUILD_ASSETS};
  # Load the app and make a test object
  $ENV{MOJO_MODE}          = 'production';
  $ENV{MOJO_WEBPACK_BUILD} = 1;
  use FindBin;
  require "$FindBin::Bin/../script/myapp.pl";
  my $t = Test::Mojo->new;
  # Find all the tags and make sure they can be loaded
  $t->get_ok("/")->status_is(200);
  $t->element_count_is('script[src], link[href][rel=stylesheet]', 2);
  $t->tx->res->dom->find("script[src], link[href][rel=stylesheet]")->each(sub {
    $t->get_ok($_->{href} || $_->{src})->status_is(200);
  });
  done_testing;

Rollup¶

rollup.js <https://rollupjs.org/> is an alternative to Webpack. Both accomplish more or less the same thing, but in different ways.

To be able to use rollup, you have to load this plugin with a different engine:

  $app->plugin(Webpack => {engine => 'Mojo::Alien::rollup', process => [qw(js css)]});

Notice¶

Mojolicious::Plugin::Webpack is currently EXPERIMENTAL.

asset¶

  # Call a method or access an attribute in this class
  my $path = $app->asset->engine->out_dir;
  # Call a method, but from inside a mojo template
  %= asset->url_for($c, "cool_beans.css")
  # Generate a HTML tag
  my $bytestream = $c->asset("cool_beans.js", @args);
  # Generate a HTML tag, but from inside a mojo template
  %= asset "cool_beans.css", media => "print"
  %= asset(url_for => "cool_beans.css")

The most basic usage of this helper is to create a HTML tag using "javascript" in Mojolicious::Plugin::TagHelpers or "stylesheet" in Mojolicious::Plugin::TagHelpers if a valid asset name is passed in.

On the other hand, the helper will return the plugin instance if no arguments are passed in, allowing you to call any of the "METHODS" or access the "ATTRIBUTES".

before_webpack_start¶

  $app->before_webpack_start(sub { my $webpack = shift; ... });

Emitted right before the plugin starts building or loading in the generated assets. Useful if you want to change any of the "engine" attributes from the defaults.

engine¶

  $engine = $webpack->engine;

Returns a Mojo::Alien::webpack or Mojo::Alien::rollup object.

asset_map¶

  $hash_ref = $webpack->asset_map;

Reads all the generated files in "asset_path" and returns a hash-ref like this:

  {
    "relative/output.js" => {               # Key is a friendly name, withouc checksum
      ext      => 'css',                    # File extension
      helper   => 'javascript',             # Mojolicious helper used to render the asset
      rel_name => "relative/output.xyz.js", # Relative filename with checksum
    },
    ...
  }

Note that changing this hash might change how "asset" and "url_for" behaves!

register¶

  $webpack->register($app, \%config);
  $app->plugin("Webpack", \%config);

Used to register this plugin into your Mojolicious app.

The %config passed when loading this plugin can have any of these attributes:

• asset_path

  Can be used to specify an alternative static directory to output the built assets to.

  Default: "/asset".

• cache_control

  Used to set the response "Cache-Control" header for built assets.

  Default: "no-cache" while developing and "max-age=86400" in production.

• engine

  Must be a valid engine class name. Examples:

    $app->plugin("Webpack", {engine => 'Mojo::Alien::rollup'});
    $app->plugin("Webpack", {engine => 'Mojo::Alien::webpack'});
      

  Default: Mojo::Alien::webpack.

• helper

  Name of the helper that will be added to your application.

  Default: "asset".

• process

  Used to specify "include" in Mojo::Alien::webpack or "include" in Mojo::Alien::rollup.

  Default: "['js']".

url_for¶

  $url = $webpack->url_for($c, $asset_name);

Returns a Mojo::URL for a given asset.