wavevision / nette-webpack
Webpack adapter for Nette framework.
Installs: 7 871
Dependents: 0
Suggesters: 0
Security: 0
Stars: 4
Watchers: 3
Forks: 1
Open Issues: 10
Requires
- php: >=7.4
- latte/latte: ^2.6
- nette/di: ^3.0
- nette/http: ^3.0
- tracy/tracy: ^2.7
- wavevision/props-control: ^6.0
- wavevision/utils: ^2.4
Requires (Dev)
- nette/application: ^3.0
- php-coveralls/php-coveralls: ^2.2
- phpstan/extension-installer: ^1.0
- phpstan/phpstan-nette: ^0.12.3
- wavevision/coding-standard: ^6.0
- wavevision/di-service-annotation: ^4.0
- wavevision/nette-tests: ^3.1
- dev-master
- 2.0.0
- 1.0.3
- 1.0.2
- 1.0.1
- 1.0.0
- 0.7.1
- 0.7.0
- 0.6.3
- 0.6.2
- 0.6.1
- 0.6.0
- 0.5.0
- 0.4.0
- 0.3.0
- 0.2.2
- 0.2.1
- 0.2.0
- 0.1.7
- 0.1.6
- 0.1.5
- 0.1.4
- 0.1.3
- 0.1.2
- 0.1.1
- 0.1.0
- dev-dependabot/npm_and_yarn/json5-1.0.2
- dev-dependabot/npm_and_yarn/qs-6.5.3
- dev-dependabot/npm_and_yarn/decode-uri-component-0.2.2
- dev-dependabot/npm_and_yarn/terser-5.14.2
- dev-dependabot/npm_and_yarn/shell-quote-1.7.3
- dev-dependabot/composer/guzzlehttp/guzzle-7.4.5
- dev-dependabot/composer/guzzlehttp/guzzle-7.4.4
- dev-dependabot/composer/guzzlehttp/psr7-2.2.1
- dev-dependabot/npm_and_yarn/minimist-1.2.6
- dev-dependabot/npm_and_yarn/nanoid-3.2.0
- dev-dependabot/composer/latte/latte-2.10.8
- dev-development
This package is auto-updated.
Last update: 2024-08-07 18:33:12 UTC
README
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
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 informationdevServer.enabled: boolean
– serve assets fromwebpack-dev-server
devServer.url: string
–webpack-dev-server
public URLdir: string
– absolute path to webpack build directorydist: string
– webpack build directory nameentries: Record<string, boolean>
– webpack entry points that should be considered when resolving assetsmanifest: 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 withsetScripts
andsetStyles
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 extensionFormatAssetName
– formats and resolves asset URL based on provided nameFormatChunkName
– 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 aneon
in whichwebpack
is configured (if not provided, default values will be used)wwwDir: string
– mandatory path to applicationwwwDir
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 instancegetDevServerPublicPath(): string
– returns resolvedwebpack-dev-server
URL withdist
included in pathgetDevServerUrl(): UrlWithParsedQuery
– returnswebpack-dev-server
parsed URL objectgetDist(): string
– returnsdist
parametergetEntries(): Record<string, boolean>
– returns records of configured webpack entriesgetEnabledEntries(): string[]
– returns list of webpack entries that havetrue
configuredgetManifest(): string
– returns webpack manifest file namegetOutputPath(): string
– returns resolved path to webpack output directoryparseNeonConfig<T extends NeonConfig>(): T
– returns parsedneon
config (throws error ifneonPath
is not defined)
Note: You can also import
Neon
helper if you want to parse and work with moreneon
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.