@wavevision/nette-webpack
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    Wavevision s.r.o.

    Nette Webpack

    CI PHPStan Coverage Status Release

    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 information
    • devServer.enabled: boolean – serve assets from webpack-dev-server
    • devServer.url: stringwebpack-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.

    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.

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

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

    Install

    npm i @wavevision/nette-webpack

    DownloadsWeekly Downloads

    27

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    25 kB

    Total Files

    21

    Last publish

    Collaborators

    • vitrozsival