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.

cpanm Mojolicious::Plugin::Webpack

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