WebpackTag 1.0.0

ASP.NET Core Tag Helper for Webpack assets. See the site at https://d.sb/webpacktag for docs.

Install-Package WebpackTag -Version 1.0.0
dotnet add package WebpackTag --version 1.0.0
<PackageReference Include="WebpackTag" Version="1.0.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add WebpackTag --version 1.0.0
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: WebpackTag, 1.0.0"
#r directive can be used in F# Interactive, C# scripting and .NET Interactive. Copy this into the interactive tool or source code of the script to reference the package.
// Install WebpackTag as a Cake Addin
#addin nuget:?package=WebpackTag&version=1.0.0

// Install WebpackTag as a Cake Tool
#tool nuget:?package=WebpackTag&version=1.0.0
The NuGet Team does not provide support for this client. Please contact its maintainers for support.

WebpackTag

NuGet version

WebpackTag is an ASP.NET Core Tag Helper for rendering links to CSS and JS files compiled via Webpack

Usage

Install the WebpackTag library using NuGet

Add the WebpackTag services to your Startup.cs:

using WebpackTag;
...
public void ConfigureServices(IServiceCollection services)
{
	services.AddWebpackTag();

Import the tag helpers in your Views/_ViewImports.cshtml file:

@addTagHelper *, WebpackTag

Then use the tag helpers in your view!

<webpack-styles />
<webpack-scripts />

These tag helpers will look for files called webpack-assets.json or asset-manifest.json in your wwwroot or SPA root directory, parse the contents, and render the correct <link> or <style> tags.

Note that when using assets-webpack-plugin, the entrypoints option should be enabled.

Multiple entry points

If your app has multiple entry points, you may specify the entry point name when using the tag

<webpack-styles entry="first" />

Configuration

Additional configuration can be performed when registering the services:

services.AddWebpackTag(options =>
{
	// ...
});

The following configuration options are available:

  • DevServerPort: Port the Webpack devserver is running on. If this is configured, the tag helpers will try hitting http://localhost:{port}/asset-manifest.json to load the manifest.
  • BaseUrl: Sets a string to prefix the generated URLs with. For example, this can be used to use a separate CDN domain in prod:
public class Startup
{
	private readonly IWebHostEnvironment _env;

	public Startup(IConfiguration configuration, IWebHostEnvironment env)
	{
		_env = env;
		Configuration = configuration;
	}

	public void ConfigureServices(IServiceCollection services)
	{
		services.AddWebpackTag(options =>
		{
			options.BaseUrl = _env.IsDevelopment() ? "/" : "https://cdn.example.com/";
		});
		// ...

Samples

This repository contains two samples:

WebpackTag

NuGet version

WebpackTag is an ASP.NET Core Tag Helper for rendering links to CSS and JS files compiled via Webpack

Usage

Install the WebpackTag library using NuGet

Add the WebpackTag services to your Startup.cs:

using WebpackTag;
...
public void ConfigureServices(IServiceCollection services)
{
	services.AddWebpackTag();

Import the tag helpers in your Views/_ViewImports.cshtml file:

@addTagHelper *, WebpackTag

Then use the tag helpers in your view!

<webpack-styles />
<webpack-scripts />

These tag helpers will look for files called webpack-assets.json or asset-manifest.json in your wwwroot or SPA root directory, parse the contents, and render the correct <link> or <style> tags.

Note that when using assets-webpack-plugin, the entrypoints option should be enabled.

Multiple entry points

If your app has multiple entry points, you may specify the entry point name when using the tag

<webpack-styles entry="first" />

Configuration

Additional configuration can be performed when registering the services:

services.AddWebpackTag(options =>
{
	// ...
});

The following configuration options are available:

  • DevServerPort: Port the Webpack devserver is running on. If this is configured, the tag helpers will try hitting http://localhost:{port}/asset-manifest.json to load the manifest.
  • BaseUrl: Sets a string to prefix the generated URLs with. For example, this can be used to use a separate CDN domain in prod:
public class Startup
{
	private readonly IWebHostEnvironment _env;

	public Startup(IConfiguration configuration, IWebHostEnvironment env)
	{
		_env = env;
		Configuration = configuration;
	}

	public void ConfigureServices(IServiceCollection services)
	{
		services.AddWebpackTag(options =>
		{
			options.BaseUrl = _env.IsDevelopment() ? "/" : "https://cdn.example.com/";
		});
		// ...

Samples

This repository contains two samples:

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version History

Version Downloads Last updated
1.0.0 1,763 11/16/2019