Mojolicious::Plugin::Webpack - Mojolicious ♥ Webpack
Check out https://github.com/jhthorsen/mojolicious-plugin-webpack/tree/master/example for a working example.
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.
webpack.custom.js
# 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", }; };
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.
To include the generated assets in your template, you can use the "asset" helper:
%= asset "myapp.css" %= asset "myapp.js"
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:
daemon
hypnotoad
crushinator
morbo
$ crushinator -h $ crushinator ./myapp.pl
However if you want to use another daemon and make webpack run, you need to set the MOJO_WEBPACK_RUN environment variable to "1". Example:
webpack
MOJO_WEBPACK_RUN
MOJO_WEBPACK_RUN=1 ./myapp.pl daemon
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_RUN} = 1; use FindBin; require "$FindBin::Bin/../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;
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.
Are you already a user of Mojolicious::Plugin::AssetPack? Mojolicious::Plugin::Webpack will automatically detect your assetpack.def file and convert it into a custom webpack config, so you don't have to do much, except changing how you load the plugin:
assetpack.def
# AssetPack $app->plugin(AssetPack => {pipes => [qw(Sass JavaScript)]}); # Webpack $app->plugin(Webpack => {process => [qw(sass js)]});
warn $app->asset->out_dir; $c->asset("cool_beans.js", @args); %= asset "cool_beans.css", media => "print" %= asset(url_for => "cool_beans.css") %= asset->url_for($c, "cool_beans.css")
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.
You can also use it to call a method and pass on $c by passing in a method name as the first argument, such as "url_for".
$c
$path = $self->assets_dir;
Holds a Mojo::File object pointing to the private directoy where source files are read from.
$hash_ref = $self->dependencies;
Holds a mapping between what this plugin can "process" and which node modules it depends on.
$path = $self->out_dir;
Holds a Mojo::File object pointing to the public directoy where processed assets are written to.
$route = $self->route;
Holds a Mojolicious::Routes::Route object that generates the URLs to a processed asset.
$self->register($app, \%config);
The %config passed when loading this plugin can have:
%config
Set this to "0" if you want to keep the old files in "out_dir".
Default: enabled.
Holds a hash ref with mapping between what to "process" and which node module that need to be installed to do so.
Name of the helper that will be added to your application.
Default: "asset".
"asset"
A list of assets to process. Currently "css", "js", "sass" and "vue" is supported.
Default: ["js"].
["js"]
Set this to "0" if you do not want source maps generated.
$url = $self->url_for($c, $asset_name);
Returns a Mojo::URL for a given asset.
Jan Henning Thorsen
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.
Mojolicious::Plugin::AssetPack.
To install Mojolicious::Plugin::Webpack, copy and paste the appropriate command in to your terminal.
cpanm
cpanm Mojolicious::Plugin::Webpack
CPAN shell
perl -MCPAN -e shell install Mojolicious::Plugin::Webpack
For more information on module installation, please visit the detailed CPAN module installation guide.