README

Nette Webpack

Nette 框架的 Webpack 适配器，包括以下内容

DI 扩展
入口块解析器 (使用 webpack manifest.json)
UI 组件以渲染 <script> 和 <link> 标签的资产
webpack 配置助手，用于与 neon 文件一致地管理设置

安装

通过 Composer 安装 DI 扩展。

composer require wavevision/nette-webpack

Webpack 助手可以通过 Yarn

yarn add --dev @wavevision/nette-webpack

或 npm

npm install --save-dev @wavevision/nette-webpack

使用方法

DI 扩展

在您的应用配置中注册 DI 扩展。

extensions:
    webpack: Wavevision\NetteWebpack\DI\Extension(%debugMode%, %consoleMode%)

您可以如下配置扩展 (默认值)。

webpack:
    debugger: %debugMode%
    devServer:
        enabled: %debugMode%
        url: https://:9006
    dir: %wwwDir%/dist
    dist: dist
    entries: []
    manifest: manifest.json

debugger: boolean – 启用 Tracy 面板并提供有用的开发信息
devServer.enabled: boolean – 从 webpack-dev-server 提供资产
devServer.url: string – webpack-dev-server 公共 URL
dir: string – webpack 构建目录的绝对路径
dist: string – webpack 构建目录名称
entries: Record<string, boolean> – 在解析资产时应考虑的 webpack 入口点
manifest: string – webpack 清单名称

然后，设置入口块。

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'));
    }
}

注意：入口块是基于 webpack manifest.json 解析的。您也可以使用 setScripts 和 setStyles 方法手动设置块或分别设置。

最后，在您的布局中渲染 assets。

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

如果您需要，您可以注入并使用以下服务来进一步自定义您的设置

NetteWebpack – 提供与扩展一起工作的基本方法
FormatAssetName – 根据提供的名称格式化和解析资产 URL
FormatChunkName – 格式化特定内容类型的块名称，并解析其 URL

Webpack 助手

这个简单的实用工具将帮助您一致地管理项目设置和 webpack 配置。它还将为您提供预配置的 webpack-manifest-plugin，以生成包含额外 chunks 属性的 manifest.json，该属性用于在应用程序中动态解析入口块。

import { WebpackHelper } from '@wavevision/nette-webpack';

助手构造函数接受以下参数

neonPath?: string – 配置 webpack 的 neon 的路径（如果没有提供，则使用默认值）
wwwDir: string – 必须提供的应用 wwwDir 路径
manifestOptions?: WebpackManifestPlugin.Options – 如果您需要自定义清单插件设置，您可以在这里进行操作

返回的类公开以下方法

createManifestPlugin(): WebpackManifestPlugin – 创建清单插件实例
getDevServerPublicPath(): string – 返回包含 dist 的路径中解析出的 webpack-dev-server URL
getDevServerUrl(): UrlWithParsedQuery – 返回 webpack-dev-server 解析后的 URL 对象
getDist(): string – 返回 dist 参数
getEntries(): Record<string, boolean> – 返回配置的 webpack 入口记录
getEnabledEntries(): string[] – 返回配置为 true 的 webpack 入口列表
getManifest(): string – 返回 webpack 清单文件名
getOutputPath(): string – 返回指向 webpack 输出目录的解析路径
parseNeonConfig<T extends NeonConfig>(): T – 返回解析的 neon 配置（如果 neonPath 未定义，则抛出错误）

注意： 如果你想解析和使用更多的 neon 文件，也可以导入 Neon 辅助工具。

查看示例 webpack 配置，以了解其全部功能。

致谢

向 Jiří Pudil 表示敬意，他的 WebpackNetteAdapter 我们在项目中使用，并为这个库提供了灵感。

wavevision / nette-webpack

维护者

详细信息

README

Nette Webpack

安装

使用方法

DI 扩展

Webpack 助手

致谢