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.

The webpack helper can be installed via Yarn

or npm

Usage

DI extension

Register DI extension in your app config.

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

• 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.

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.

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.

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.