Mojo::A...webpack(3)

💖 NAME 💖

Mojo::Alien::webpack is giving run the external nodejs program webpack energy — yes, that webpack (https://webpack.js.org/) 💅✨

---

🌈 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 running the external nodejs program webpack (https://webpack.js.org/) — it’s literally the class that handles the webpack moment, no cap ✨

---

🎀 ATTRIBUTES 🎀

✨ assets_dir ✨

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

Location to source assets and partial webpack.config.js files — the source-assets spot, bestie 🫶

🌸 binary 🌸

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

The path to the webpack executable. Defaults to the "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 (https://webpack.js.org/concepts/configuration/) — the config file in question, periodt ⭐

🔥 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 do 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 — iykyk. Here’s an example of which files will be included if they exist:

  # 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 the "NODE_ENV" environment variable when calling build or watch — vibe check your mode, bestie 💅

🍓 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 — the output-assets zone 👑

---

💜 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 — so yeah, EXPERIMENTAL means EXPERIMENTAL, bestie 😭

🔨 build 🔨

$webpack->build;

Will build the assets or croaks on errors. Automatically calls init — it’s giving main character build energy 🔥

🚀 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 — obsessed with the efficiency, fr fr 💖

---

🌟 SEE ALSO 🌟

Mojolicious::Plugin::Webpack and Mojo::Alien::rollup — go read those too, bestie 🦋

---

And that’s the whole page, bestie 🫶 It’s User Contributed Perl Documentation from perl v5.42.0, dated 2025-09-30, and the footer labels it Mojo::A...webpack(3) 💅