From Code to Community: Sponsoring The Perl and Raku Conference 2025 Learn more

 / 
Mojolicious-Plugin-Webpack-1.02
River stage zero No dependents
/ Mojo::Alien::webpack

NAME

Mojo::Alien::webpack - Runs the external nodejs program webpack

SYNOPSIS


            

              
              
use Mojo::Alien::webpack;
my $webpack = Mojo::Alien::webpack->new;
# Run once
$webpack->build;
# Build when webpack see files change
$webpack->watch;

DESCRIPTION

Mojo::Alien::webpack is a class for runnig the external nodejs program webpack.

ATTRIBUTES

assets_dir


            

              
              
$path = $webpack->assets_dir;
$webpack = $webpack->assets_dir($webpack->config->dirname->child('assets'))

Location to source assetsa and partial webpack.config.js files.

binary


            

              
              
$array_ref = $webpack->binary;
$webpack = $webpack->binary('webpack');

The path to the webpack executable. Defaults to MOJO_WEBPACK_BINARY environment variable, or "webpack" inside "./node_modules". Fallback to just "webpack".

config


            

              
              
$path = $webpack->config;
$webpack = $webpack->config(path->to_abs->child('webpack.config.js'));

Holds an /absolute path to webpack.config.js.

dependencies


            

              
              
$hash_ref = $webpack->dependencies;

A hash where the keys can match the items in "include" and the values are lists of packages to install. Keys that does /not match items in "include" will be ignored. This attribute will be used by "init".

These dependencies are predefined:


            

              
              
core   | webpack webpack-cli
css    | css-loader mini-css-extract-plugin css-minimizer-webpack-plugin
eslint | eslint-webpack-plugin
js     | @babel/core @babel/preset-env @babel/plugin-transform-runtime babel-loader terser-webpack-plugin
sass   | css-loader mini-css-extract-plugin css-minimizer-webpack-plugin sass sass-loader
vue    | vue vue-loader vue-template-compiler

include


            

              
              
$array_ref = $webpack->include;
$webpack = $webpack->include([qw(js css)]);

"include" can be used to install dependencies and load other webpack config files. The config files included must exist in the "webpack.config.d" sub directory inside "assets_dir". Here is an example of which files that will be included if they exists:


            

              
              
# Including "js" and "css" will look for the files below
$webpack->include[qw(js css)]);
# - assets/webpack.config.d/package-babel-loader.js
# - assets/webpack.config.d/package-terser-webpack-plugin.js
# - assets/webpack.config.d/package-css-loader.js
# - assets/webpack.config.d/package-css-minimizer-webpack-plugin.js
# - assets/webpack.config.d/js.js
# - assets/webpack.config.d/css.js

The "include" feature is currently EXPERIMENTAL.

mode


            

              
              
$str = $webpack->mode;
$webpack = $webpack->mode('development');

Should be either "development" or "production". Will be used as "NODE_ENV" environment variable when calling "build" or "watch".

npm


            

              
              
$npm = $webpack->npm;

A Mojo::Alien::npm object used by "init".

out_dir


            

              
              
$path = $webpack->out_dir;
$webpack = $webpack->out_dir(path('dist')->to_abs);

Location to write output assets to.

METHODS

asset_map


            

              
              
$hash_ref = $webpack->asset_map;

Parses the filenames in "out_dir" and returns a hash ref with information about the generated assets. Example return value:


            

              
              
{
  'relative/output.development.js' => {            # Key is relative path to out_dir()
    ext   => 'css',                                # File extension
    mode  => 'development',                        # or "production"
    mtime => 1616976114,                           # File modification epoch timestamp
    name  => 'relative/output.js',                 # Name of asset, without checksum or mode
    path  => '/path/to/entry-name.development.js', # Absolute path to asset
  },
}

Note that this method is currently EXPERIMENTAL.

build


            

              
              
$webpack->build;

Will build the assets or croaks on errors. Automatically calls "init".

exec


            

              
              
$webpack->exec;

This method will replace the current process, instead of starting webpack inside a fork. This method is called by "watch" inside a fork.

init


            

              
              
$webpack = $webpack->init;

Will install "webpack" and "webpack-cli" and create a default "config". Does nothing if this is already done.

This method is automatically called by "build" and "watch".

pid


            

              
              
$int = $webpack->pid;

Returns the PID of the webpack process started by "start".

stop


            

              
              
$webpack->stop;

Will stop the process started by "watch". Does nothing if "watch" has not been called.

watch


            

              
              
$webpack->watch;

Forks a new process that runs "webpack watch". This means that any changes will generate new assets. This is much more efficient than calling "build" over and over again. Automatically calls "init".

SEE ALSO

Mojolicious::Plugin::Webpack and Mojo::Alien::rollup.