See template repository for example of usage: AspNetWebpack-Template
Initialize AspNetWebpack components in Program.cs:
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddAspNetWebpack(builder.Configuration, builder.Environment);Use extensions to get the bundle name:
var bundle = ViewData.GetBundleName() // Gets the bundle name from ViewData["Bundle"]
var bundle = Html.GetBundleName() // Gets the bundle name from the view contextRecommended use in eg. _Layout.cshtml:
var bundle = ViewData.GetBundleName() ?? Html.GetBundleName();
// Gets the bundle name from the view context but allows overriding it in ViewData["Bundle"]Use AssetService to get assets:
@inject IAssetService AssetService
@await AssetService.AssetPath
// Generates: /Path/To/Assets
@await AssetService.GetBundlePathAsync("SomeBundle.js")
// Generates: /Path/To/Assets/SomeBundle.js?v=cache-buster
@await AssetService.GetScriptTagAsync("SomeBundle")
// Generates: <script src="/Path/To/Assets/SomeBundle.js?v=cache-buster"></script>
@await AssetService.GetLinkTagAsync("SomeBundle")
// Generates: <link href="/Path/To/Assets/SomeBundle.css?v=cache-buster" rel=\"stylesheet\" />
@await AssetService.GetStyleTagAsync("SomeBundle")
// Generates: <style>Inlined CSS</styleOverloads exists on GetBundlePathAsync in case no extension is applied to the bundle name.
Overloads exists on GetScriptTagAsync to change the load behaviour to eg. async and/or defer.
A fallback bundle can be set on: GetScriptTagAsync, GetLinkTagAsync, GetStyleTagAsync
@await AssetService.GetScriptTagAsync("SomeBundle", "FallbackBundle")
// Generates: <script src="/Path/To/Assets/SomeBundle.js?v=cache-buster"></script>
// Or if SomeBundle does not exist: <script src="/Path/To/Assets/FallbackBundle.js?v=cache-buster"></script>@using AspNetWebpack
@inject IAssetService AssetService
@{
var bundle = ViewData.GetBundleName() ?? Html.GetBundleName();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - AspNetWebpack</title>
@await AssetService.GetLinkTagAsync(bundle, "Layout");
</head>
<body>
@RenderBody()
@await AssetService.GetScriptTagAsync(bundle, "Layout", ScriptLoad.Defer);
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>