Razor Pages and Webpack can be friends 👍
RWC is in beta, released as something that I found useful myself.
Use Webpack by just adding <webpack /> to your Razor Pages.
(R )azor (W )ebpack (C )omponents is a package that gives you a modern JavaScript / CSS experience when developing with Razor Pages. Although SPA's are great there are good reasons why Razor Pages is still a good choice for web development - for example redirect flows for OpenID and anything where you need server rendering.
Razor Pages is still one of the easiest ways to develop a web app using ASP.NET Core. However currently there isn't a well maintained modern bundling solution for Razor Pages. RWC seamlessly allows you to use the popular static bundler Webpack with Razor pages.
👉 Easily manage your frontend Packages using npm
👉 JavaScript and CSS dependencies added to your Pages by convention
👉 Minification, Cache busting and bundling in production
👉 Reference your JavaScript and CSS dependencies using a Razor Component
👉 Easily add vendor frameworks like React, Vue etc.
Ensure you have Node.js and .NET Core >= 3.0 installed.
To use RWC you need a Razor Pages project.
Use an existing Razor pages project or create a new one using Visual Studio or the dotnet CLI:
> dotnet new razor> dotnet add package DalSoft.RazorWebpackComponentsNow Build your project this ensures all the required build files are copied to your project.
Add the RWC tag helper to _ViewImports.cshtml
@addTagHelper *, DalSoft.RazorWebpackComponentsNow you have a Razor Pages project add the <Webpack /> component to the head (for CSS) and body (for JS) of your _layout Razor template.
<!DOCTYPE html>
<html lang="en">
<head