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
neonfiles
Install the DI extension via Composer.
composer require wavevision/nette-webpackThe webpack helper can be installed via Yarn
yarn add --dev @wavevision/nette-webpackor npm
npm install --save-dev @wavevision/nette-webpackRegister 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.jsondebugger: booleanβ enable Tracy panel with useful development informationdevServer.enabled: booleanβ serve assets fromwebpack-dev-serverdevServer.url: stringβwebpack-dev-serverpublic 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 withsetScriptsandsetStylesmethods.
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
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 aneonin whichwebpackis configured (if not provided, default values will be used)wwwDir: stringβ mandatory path to applicationwwwDirmanifestOptions?: 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-serverURL withdistincluded in pathgetDevServerUrl(): UrlWithParsedQueryβ returnswebpack-dev-serverparsed URL objectgetDist(): stringβ returnsdistparametergetEntries(): Record<string, boolean>β returns records of configured webpack entriesgetEnabledEntries(): string[]β returns list of webpack entries that havetrueconfiguredgetManifest(): stringβ returns webpack manifest file namegetOutputPath(): stringβ returns resolved path to webpack output directoryparseNeonConfig<T extends NeonConfig>(): Tβ returns parsedneonconfig (throws error ifneonPathis not defined)
Note: You can also import
Neonhelper if you want to parse and work with moreneonfiles.
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.