Componette

Componette

wavevision

wavevision / nette-webpack

πŸ“¦ @webpack adapter for @nette framework

download-cloud-line composer require wavevision/nette-webpack

Nette Webpack

CI PHPStan Coverage Status Release

Webpack adapter for Nette framework consisting of:

  • DI extension
  • entry point chunks resolver (uses webpack manifest.json)
  • UI components to render assets <script> and <link> tags
  • webpack config helper to manage your setup consistently with neon files

Installation

Install the DI extension via Composer.

composer require wavevision/nette-webpack

The webpack helper can be installed via Yarn

yarn add --dev @wavevision/nette-webpack

or npm

npm install --save-dev @wavevision/nette-webpack

Usage

DI extension

Register DI extension in your app config.

extensions:
    webpack: Wavevision\NetteWebpack\DI\Extension(%debugMode%, %consoleMode%)

You can configure the extension as follows (default values).

webpack:
    debugger: %debugMode%
    devServer:
        enabled: %debugMode%
        url: http://localhost:9006
    dir: %wwwDir%/dist
    dist: dist
    entries: []
    manifest: manifest.json
  • debugger: boolean – enable Tracy panel with useful development information
  • devServer.enabled: boolean – serve assets from webpack-dev-server
  • devServer.url: string – webpack-dev-server public URL
  • dir: string – absolute path to webpack build directory
  • dist: string – webpack build directory name
  • entries: Record<string, boolean> – webpack entry points that should be considered when resolving assets
  • manifest: string – webpack manifest name

Then, setup entry chunks.

use Nette\Application\UI\Presenter;
use Wavevision\NetteWebpack\InjectResolveEntryChunks;
use Wavevision\NetteWebpack\UI\Components\Assets\AssetsComponent;

final class AppPresenter extends Presenter
{

    use AssetsComponent;
    use InjectResolveEntryChunks;

    public function actionDefault(): void
    {
        $this
            ->getAssetsComponent()
            ->setChunks($this->resolveEntryChunks->process('entry'));
    }
}

Note: Entry chunks are resolved based on webpack manifest.json. You can also set chunks manually and/or separately with setScripts and setStyles methods.

Finally, render assets in your layout.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width">
		<title>Wavevision Nette Webpack</title>
		{control assets:styles}
	</head>
	<body>
		{include content}
		{control assets:scripts}
	</body>
</html>

Should you need it, you can inject and use following services to further customize your setup:

  • NetteWebpack – provides basic methods to work with the extension
  • FormatAssetName – formats and resolves asset URL based on provided name
  • FormatChunkName – formats chunk names for specific content types and resolves their URL

Webpack helper

This simple utility will help you to manage your project setup and webpack configs consistently. It will also provide you with pre-configured webpack-manifest-plugin to generate manifest.json with extra chunks property that is used to dynamically resolve entry chunks in your application.

import { WebpackHelper } from '@wavevision/nette-webpack';

The helper constructor accepts following arguments:

  • neonPath?: string – path to a neon in which webpack is configured (if not provided, default values will be used)
  • wwwDir: string – mandatory path to application wwwDir
  • manifestOptions?: WebpackManifestPlugin.Options – if you need to customize manifest plugin setup, you can do it here

The returned class exposes following methods:

  • createManifestPlugin(): WebpackManifestPlugin – creates manifest plugin instance
  • getDevServerPublicPath(): string – returns resolved webpack-dev-server URL with dist included in path
  • getDevServerUrl(): UrlWithParsedQuery – returns webpack-dev-server parsed URL object
  • getDist(): string – returns dist parameter
  • getEntries(): Record<string, boolean> – returns records of configured webpack entries
  • getEnabledEntries(): string[] – returns list of webpack entries that have true configured
  • getManifest(): string – returns webpack manifest file name
  • getOutputPath(): string – returns resolved path to webpack output directory
  • parseNeonConfig<T extends NeonConfig>(): T – returns parsed neon config (throws error if neonPath is not defined)

Note: You can also import Neon helper if you want to parse and work with more neon files.

See example webpack config to see it all in action.

Credits

Many️ πŸ™ to JiΕ™Γ­ Pudil for his WebpackNetteAdapter which we used in our projects and served as an inspiration for this library.

No release at this moment. Try to create first one.

bar-chart-fill

Statistics

download-cloud-fill
7403
star-fill
4
bug-fill
10
flashlight-fill
1.2y
price-tag-2-line

Badges

guide-fill

Dependencies

Componette Componette felix@nette.org