NAME

Mojolicious::Plugin::Webpack - Mojolicious ♥ Webpack

SYNOPSIS

Check out https://github.com/jhthorsen/mojolicious-plugin-webpack/tree/master/example for a working example.

Define assets

One or more assets need to be defined. The minimum is to create one entry point and add it to the webpack.custom.js file.

  # Entrypoint: ./assets/app.js
  // This will result in one css and one js asset.
  import "../css/css-example.css";
  console.log("I'm loaded!");

  # Config file: ./assets/webpack.custom.js
  module.exports = function(config) {
    config.entry = {
      "cool_beans": "./assets/app.js",
    };
  };

Application

Your lite or full app, need to load Mojolicious::Plugin::Webpack and tell it what kind of assets it should be able to process:

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

See "register" for more config options.

Template

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

  %= asset "my_app.css"
  %= asset "my_app.js"

Start application

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

  $ crushinator -h
  $ crushinator ./my_app.pl

DESCRIPTION

Mojolicious::Plugin::Webpack is a Mojolicious plugin to make it easier to work with https://webpack.js.org/.

Note that Mojolicious::Plugin::Webpack is currently EXPERIMENTAL, and changes might come without a warning.

HELPERS

asset

  warn $app->asset->out_dir;
  $c->asset("cool_beans.js", @args);
  %= asset "cool_beans.css", media => "print"

This helper will return the plugin instance if no arguments is passed in, or a HTML tag created with either "javascript" in Mojolicious::Plugin::TagHelpers or "stylesheet" in Mojolicious::Plugin::TagHelpers if a valid asset name is passed in.

ATTRIBUTES

assets_dir

  $path = $self->assets_dir;

Holds a Mojo::File object pointing to the private directoy where source files are read from.

dependencies

  $hash_ref = $self->dependencies;

Holds a mapping between what this plugin can "process" and which node modules it depends on.

out_dir

  $path = $self->out_dir;

Holds a Mojo::File object pointing to the public directoy where processed assets are written to.

route

  $route = $self->route;

Holds a Mojolicious::Routes::Route object that generates the URLs to a processed asset.

METHODS

register

  $self->register($app, \%config);

The %config passed when loading this plugin can have:

auto_cleanup

Set this to "0" if you want to keep the old files in "out_dir".

Default: enabled.

dependencies

Holds a hash ref with mapping between what to "process" and which node module that need to be installed to do so.

helper

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

Default: "asset".

process

A list of assets to process. Currently "css", "js", "sass" and "vue" is supported.

Default: ["js"].

source_maps

Set this to "0" if you do not want source maps generated.

Default: enabled.

AUTHOR

Jan Henning Thorsen

COPYRIGHT AND LICENSE

Copyright (C) 2018, Jan Henning Thorsen

This program is free software, you can redistribute it and/or modify it under the terms of the Artistic License version 2.0.

SEE ALSO

Mojolicious::Plugin::AssetPack.

cpanm Mojolicious::Plugin::Webpack

perl -MCPAN -e shell
install Mojolicious::Plugin::Webpack