Webpack adapter for Nette framework.
npm install @wavevision/nette-webpack



Webpack adapter for Nette framework consisting of:
- DI extension
- entry point chunks resolver (uses webpack manifest.json)
- UI components to render assets and tags
- webpack config helper to manage your setup consistently with neon files
Install the DI extension via Composer.
``bash`
composer require wavevision/nette-webpack
The webpack helper can be installed via Yarn
`bash`
yarn add --dev @wavevision/nette-webpack
or npm
`bash`
npm install --save-dev @wavevision/nette-webpack
Register DI extension in your app config.
`neon`
extensions:
webpack: Wavevision\NetteWebpack\DI\Extension(%debugMode%, %consoleMode%)
You can configure the extension as follows _(default values)_.
`neon`
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-serverdevServer.url: string
- – webpack-dev-server public URLdir: string
- – absolute path to webpack build directorydist: string
- – webpack build directory nameentries: Record
- – webpack entry points that should be considered when resolving assetsmanifest: string
- – webpack manifest name
Then, setup entry chunks.
`php
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 alsosetScripts
> set chunks manually and/or separately with and setStyles methods.
Finally, render assets in your layout.
`latte`
{control assets:styles}
{include content}
{control assets:scripts}
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
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.jsonchunks
with extra property that is used to dynamically resolve entry chunks in your application.
`typescript`
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 bewwwDir: string
used)
- – mandatory path to application wwwDirmanifestOptions?: 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 pathgetDevServerUrl(): UrlWithParsedQuery
- – returns webpack-dev-server parsed URL objectgetDist(): string
- – returns dist parametergetEntries(): Record
- – returns records of configured webpack entriesgetEnabledEntries(): string[]
- – returns list of webpack entries that have true configuredgetManifest(): string
- – returns webpack manifest file namegetOutputPath(): string
- – returns resolved path to webpack output directoryparseNeonConfig
- – 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.
Many️ 🙏 to Jiří Pudil for
his WebpackNetteAdapter which we used in our projects and served as an
inspiration for this library.