Skip to content

Daniel15/WebpackTag

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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: