razor-partial-views-webpack-plugin

Razor Partial Views Webpack Plugin

Plugin for generating ASP.NET Razor partial views for assets built with webpack.

Versions and compatibility

v4 for Rspack and webpack 5+ v3 for webpack v2-5

Usage

razor-partial-views-webpack-plugin use rules for generating cshtml/vbhtml views wrapping assets built with webpack. With the plugin comes templates for scripts and styles, but any type of asset can be used as Razor view source.

Installation

• npm install razor-partial-views-webpack-plugin --save-dev
• yarn add razor-partial-views-webpack-plugin --dev

Getting started

To get familiar with the output from razor-partial-views-webpack-plugin, the quickest way is using the plugin's defaults, to generate partial views for all JavaScript and CSS.

// webpack.config.js
plugins: [new RazorPartialViewsWebpackPlugin()];

Options

The templating process can be customized to fit the needs of your application. Here follows the configuration options that are supported.

new RazorPartialViewsWebpackPlugin({
  // "csharp" (default) or "vb"
  target: "chsharp",
  rules: [
    {
      // regex match asset filename(s)
      // (takes precedence over `name`)
      test: /(app|vendor).*\.js$/
    },
    {
      // match asset by name
      name: "runtime",
      // no attributes in `template` are required
      template: {
        // prepend header to view
        header: () => "<!-- a header -->",
        // usings in view
        using: ["System", "System.Web"],
        // view's model
        model: "dynamic",
        // append footer to view
        footer: () => `@* View generated ${new Date().toISOString()} *@`,
        // if needed, use a custom template
        path: path.join(__dirname, "templates/custom-template.tmpl"),
        // in custom template, placeholder to find & replace with asset
        // (default ##URL##/##SOURCE##)
        replace: /##CONTENT-GOES-HERE##/
      },
      // `output` not required, defaults to:
      // - webpack's output directory
      // - load asset by URL
      // - asset name from chunk name/filename
      output: {
        inline: true,
        async: false,
        defer: false,
        // asset is ESM module
        module: false,
        // ...or fallback if module not supported
        nomodule: false,
        // assign predicable name to generated partial view
        name: defaultName => `generated-${defaultName}`,
        // output view to custom location
        path: path.join(__dirname, "Views/_GeneratedViews")
      }
    }
  ]
});

Example configuration

razor-partial-views-webpack-plugin supports referencing and inlining assets generated by webpack. Here follows an example configuration based on webpack's caching docs. A partial view for styles is also created.

const path = require("path");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const RazorPartialViewsWebpackPlugin = require("razor-partial-views-webpack-plugin");

module.exports = {
  entry: {
    app: path.join(__dirname, "app.js")
  },
  output: {
    path: path.join(__dirname, "dist"),
    publicPath: "/dist/",
    filename: "[name].[contenthash].js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          "css-loader"
        ]
      }
    ]
  },
  optimization: {
    runtimeChunk: "single",
    splitChunks: {
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          chunks: "all"
        },
        defaultStyles: {
          name: "styles",
          test: /\.css$/,
          chunks: "all",
          enforce: true
        }
      }
    }
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash].css",
      ignoreOrder: false
    }),
    new RazorPartialViewsWebpackPlugin({
      rules: [
        {
          name: ["app", "vendors", "styles"]
        },
        {
          name: "runtime",
          output: {
            inline: true
          }
        }
      ]
    })
  ]
};

Options in use

Included in the plugin repository is an example webpack setup where various rules are used. By executing npm run example, partial views are created e.g. for inlining CSS and webpack's runtime.

Compiling views

When running your ASP.NET web site, the generated views will be compiled. Below follows a few tips to keep in mind:

• If you run into Compiler Error Message: CS0103: The name 'model' does not exist in the current context, this Stack Overflow answer guides you in the right direction.
• If you're executing razor-partial-views-webpack-plugin on a build server, make sure you've included the generated views' output directory in the artifact.

Even more control

razor-partial-views-webpack-plugin is an extension of templated-assets-webpack-plugin. For more configuration options and detailed control, use templated-assets-webpack-plugin.

Feedback

• For feedback, bugs or change requests, please use Issues.
• For direct contact, tweet @jouni_kantola.