Nette Webpack

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

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.

Componette

wavevision / nette-webpack

Nette Webpack

Installation

Usage

DI extension

Webpack helper

Credits

GitHub

Badges

Dependencies