mojolicious plugin webpack
1.0.0
Mojolicious::外掛程式::Webpack - Mojolicious ♥ Webpack
相對於您的應用程式目錄建立一個檔案“./assets/index.js”，其中包含以下內容：
console.log('Cool beans!');您的 Mojolicious 應用程式需要載入 Mojolicious::Plugin::Webpack 插件並告訴它應該能夠處理哪種資源：
$app->plugin(Webpack => {process => [qw(js css)]});有關更多配置選項，請參閱“註冊”。
要將產生的資產包含在範本中，您可以使用「資產」助手：
%= asset "cool_beans.css" %= asset "cool_beans.js"
您可以使用daemon 、 hypnotoad或任何您想要的 Mojolicious 伺服器啟動應用程序，但如果您想要快速開發，您應該使用mojo webpack ，它是morbo的替代品：
$ mojo webpack -h $ mojo webpack ./script/myapp.pl
但是，如果您想使用另一個守護程序並強制webpack運行，則需要將MOJO_WEBPACK_BUILD環境變數設為「1」。例子：
MOJO_WEBPACK_BUILD=1 ./script/myapp.pl daemon
如果你想確保你已經建立了所有資產，你可以建立一個測試文件，例如「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_BUILD} = 1;
use FindBin;
require "$FindBin::Bin/../script/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 是一個 Mojolicious 插件，可以更輕鬆地使用 https://webpack.js.org/ 或 https://rollupjs.org/。該插件將...
產生最小的package.json和 Webpack 或 Rollup 設定檔。手動執行此操作是可能的，但如果您還不熟悉 Webpack，那麼弄清楚所有的細節可能會非常耗時。
載入入口點“./assets/index.js”，這是客戶端應用程式的起點。入口檔案可以載入JavaScript、CSS、SASS…，只要載入適當的處理插件即可。
確切地知道 Webpack 使用哪些插件可能很困難。因此，Mojolicious::Plugin::Webpack 有一些預先定義的規則，用於取得和安裝 Nodejs 依賴項。不過，生產中不需要任何 Nodejs 模組，因此只會在開發時安裝。
開發時，Webpack 可執行檔會在 Mojo::Server::Morbo 旁自動啟動。 Webpack 將使用適當的開關啟動，以監視原始檔案並在變更時重新編譯。
rollup.js 是 Webpack 的替代品。兩者或多或少都完成了相同的事情，但方式不同。
為了能夠使用 rollup，您必須使用不同的引擎來載入此外掛程式：
$app->plugin(Webpack => {engine => 'Mojo::Alien::rollup', process => [qw(js css)]});Mojolicious::Plugin::Webpack 目前處於實驗階段。
# Call a method or access an attribute in this class
my $path = $app->asset->engine->out_dir;
# Call a method, but from inside a mojo template
%= asset->url_for($c, "cool_beans.css")
# Generate a HTML tag
my $bytestream = $c->asset("cool_beans.js", @args);
# Generate a HTML tag, but from inside a mojo template
%= asset "cool_beans.css", media => "print"
%= asset(url_for => "cool_beans.css")這個幫助器最基本的用法是使用 Mojolicious::Plugin::TagHelpers 中的「javascript」或 Mojolicious::Plugin::TagHelpers 中的「樣式表」（如果傳入有效的資產名稱）來建立 HTML 標籤。
另一方面，如果沒有傳入參數，助手將傳回插件實例，允許您呼叫任何「方法」或存取「屬性」。
$app->before_webpack_start(sub { my $webpack = shift; ... });在插件開始建置或載入生成的資源之前發出。如果您想更改任何預設的“引擎”屬性，這很有用。
$engine = $webpack->engine;
傳回 Mojo::Alien::webpack 或 Mojo::Alien::rollup 物件。
$hash_ref = $webpack->asset_map;
讀取“asset_path”中所有產生的檔案並傳回一個雜湊引用，如下所示：
{
"relative/output.js" => { # Key is a friendly name, withouc checksum
ext => 'css', # File extension
helper => 'javascript', # Mojolicious helper used to render the asset
rel_name => "relative/output.xyz.js", # Relative filename with checksum
},
...
}請注意，更改此哈希可能會更改“asset”和“url_for”的行為！
$webpack->register($app, %config);
$app->plugin("Webpack", %config);用於將此插件註冊到您的 Mojolicious 應用程式中。
載入此外掛程式時傳遞的%config可以具有以下任何屬性：
資產路徑
可用於指定將建置的資源輸出到的備用靜態目錄。
預設值：“/資產”。
快取控制
用於設定建置資源的回應“Cache-Control”標頭。
預設值：開發時為“no-cache”，生產時為“max-age=86400”。
引擎
必須是有效的引擎類別名稱。範例：
$app->plugin("Webpack", {engine => 'Mojo::Alien::rollup'});
$app->plugin("Webpack", {engine => 'Mojo::Alien::webpack'});預設值：Mojo::Alien::webpack。
幫手
將添加到您的應用程式中的助手的名稱。
預設值：“資產”。
過程
用於指定 Mojo::Alien::webpack 中的“include”或 Mojo::Alien::rollup 中的“include”。
預設值： ['js'] 。
$url = $webpack->url_for($c, $asset_name);
傳回給定資產的 Mojo::URL。
簡‧亨寧‧索爾森
版權所有 (C) Jan Henning Thorsen
該程式是免費軟體，您可以根據 Artistic License 2.0 版的條款重新分發和/或修改它。
Mojo::Alien::rollup，Mojo::Alien::webpack。
