Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wavevision/nette-webpack
π¦ @webpack adapter for @nette framework
https://github.com/wavevision/nette-webpack
adapter di-extension extension nette nette-webpack webpack webpack-helper
Last synced: about 1 month ago
JSON representation
π¦ @webpack adapter for @nette framework
- Host: GitHub
- URL: https://github.com/wavevision/nette-webpack
- Owner: wavevision
- License: mit
- Archived: true
- Created: 2020-02-21T14:16:15.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T15:08:07.000Z (almost 2 years ago)
- Last Synced: 2024-09-26T05:05:13.294Z (about 1 month ago)
- Topics: adapter, di-extension, extension, nette, nette-webpack, webpack, webpack-helper
- Language: PHP
- Homepage:
- Size: 1.62 MB
- Stars: 4
- Watchers: 3
- Forks: 1
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Nette Webpack
[](https://github.com/wavevision/nette-webpack/actions/workflows/ci.yml)
[](https://github.com/phpstan/phpstan)
[](https://coveralls.io/github/wavevision/nette-webpack?branch=master)
[](https://github.com/wavevision/nette-webpack/releases)
Webpack adapter for Nette framework consisting of:
- [DI extension](#di-extension)
- entry point chunks resolver **(uses webpack `manifest.json`)**
- UI components to render assets `` and `<link>` tags
- [webpack config helper](#webpack-helper) to manage your setup consistently with `neon` files
## Installation
Install the DI extension via [Composer](https://getcomposer.org).
```bash
composer require wavevision/nette-webpack
```
The webpack helper can be installed via [Yarn](https://yarnpkg.com)
```bash
yarn add --dev @wavevision/nette-webpack
```
or [npm](https://npmjs.com)
```bash
npm install --save-dev @wavevision/nette-webpack
```
## Usage
### DI extension
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](https://github.com/nette/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.
```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 also
> set chunks manually and/or separately with `setScripts` and `setStyles` methods.
Finally, render `assets` in your layout.
```latte
<!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`](./src/NetteWebpack/NetteWebpack.php) β provides basic methods to work with the extension
- [`FormatAssetName`](./src/NetteWebpack/FormatAssetName.php) β formats and resolves asset URL based on provided name
- [`FormatChunkName`](./src/NetteWebpack/FormatChunkName.php) β 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](https://github.com/danethurber/webpack-manifest-plugin) to
generate `manifest.json`
with extra `chunks` 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 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](./examples/webpack.config.ts) to see it all in action.
## Credits
ManyοΈ π to [JiΕΓ Pudil](https://github.com/jiripudil) for
his [WebpackNetteAdapter](https://github.com/o2ps/WebpackNetteAdapter) which we used in our projects and served as an
inspiration for this library.